将文本值放在imageBackground上

Question

在按下触发函数的按钮addText()后，我尝试在imageBackground顶部传递文本输入值。我成功地将我的值传递到警告框中，但我不确定如何将文本输入值传递到其他组件中。我希望我的文本输入显示在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>
        )


    }
}

Answer 1

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>
        )

    }
}

只需检查您是否点击了添加按钮的条件，并采取文本显示决定。

Answer 2

如果我没理解错你的问题：

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)
}