我按下按钮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>
)
}
}
答案 0 :(得分:0)
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>
)
}
}
只是检查条件是否单击了添加按钮并进行文本显示决定。
答案 1 :(得分:0)
如果我理解你的问题:
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)
}