Поместить текстовое значение поверх imageBackground - PullRequest
Новая
       65

Поместить текстовое значение поверх imageBackground

0 голосов
/ 09 мая 2018

Я пытаюсь передать значение ввода текста поверх imageBackground после того, как нажимаю кнопку addText (), которая вызывает функцию. Мне удается передать значение в окно предупреждения, но я не уверен, как передать значение ввода текста в другой компонент. Я хочу, чтобы мой текстовый ввод отображался поверх imageBackground.

Файл Filter.js: 

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Button title="Capture Device Screenshot" onPress={this.captureScreenFunction} />
                <ImageBackground source={{ uri: this.state.imageURI }} style={{ width: 200, height: 300, marginTop: 5, alignSelf: 'center' }} >
                    <Text>{this.text}</Text>
                </ImageBackground>
                <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                    <View>
                        <NewText />
                    </View>
                </View>
            </View>

NewText.js: 

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button, Platform, TouchableOpacity, TextInput, ImageBackground } from 'react-native';

export default class NewText extends Component {

    constructor(props) {

        super(props);

        this.state = {
            text: '',
        }
    }

    addText = () => {
       let newItem = this.state.text;
       alert( newItem )
    }

    render() {

        return (

            <View>
                <TextInput
                    ref="newItemText"
                    style={{ height: 40 }}
                    placeholder="Type something..."
                    onChangeText={(text) => this.setState({ text })}
                    //value = {this.state.text}
                />
                <Button onPress={this.addText} title={'Add text'} />
            </View>
        )


    }
}

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Если я правильно понимаю ваш вопрос:

Файл Filter.js: 

<Text>{this.state.changedText}</Text>
...
<NewText onChange={(changedText) => this.setState({changedText}) />

NewText.js: 

addText = () => {
   let newItem = this.state.text
   this.props.onChange(newItem)
}
0 голосов
/ 09 мая 2018 
export default class NewText extends Component {

    constructor(props) {

        super(props);

        this.state = {
            text: '',
            putText:false 
        }
    }

    addText = () => {
       let newItem = this.state.text;
       alert( newItem )
    }

    render() {

        return (
            <View>
                 <ImageBackground source={{ uri: this.state.imageURI }} style={{ width: 200, height: 300, marginTop: 5, alignSelf: 'center' }} >
                    <Text>{this.state.putText ? this.state.text : ''}</Text>
                </ImageBackground>
                <TextInput
                    ref="newItemText"
                    style={{ height: 40 }}
                    placeholder="Type something..."
                    onChangeText={(text) => this.setState({ text })}
                    //value = {this.state.text}
                />
                <Button onPress={()=>this.setState({putText:true})} title={'Add text'} />
            </View>
        )

    }
}

просто проверьте условие, нажали ли вы кнопку «Добавить» или нет, и примите решение для отображения текста.

...