如何在React native中键入文本并使文本显示在下面的框中

Question

class Newsfeed extends React.Component{
render(){

return (
<View style={{alignItems: "center"}}>
<Text style={{fontSize: 50}}>Junior Facebook</Text>
<TextInput style={{borderStyle: "solid", borderWidth: 2, marginLeft: 650, width: 200, height: 40}} value="Search"></TextInput>
<View>
<Image source={{ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'}} style={{width: 120, height: 200, marginLeft: 120, marginTop: 80}} />
<View style={{flex: 1, flexDirection: "row"}} />
<View style={{top: -200, marginLeft: 240, width: 700, height: 200, backgroundColor: "lightblue"}}>
<TextInput placeholder="New Post" style={{fontSize: 40, width: 700, height: 150, borderStyle: "solid", borderWidth: 2}} />
<Button style={{width: 65, height: 45, marginLeft: 635 }} title="Enter"></Button> 
</View>
<View style={{marginTop: -199, marginLeft: 120, width: 820, height: 300, backgroundColor: "pink"}} >
<Image source={{ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'}} style={{width: 120, height: 200, marginLeft: 0, marginTop: 0}} />
<Text style={{fontSize: 40, marginLeft: 120, marginTop: -200, width: 700, height: 240, borderStyle: "solid", borderWidth: 2}}></Text>
<Button style={{width: 65, height: 45, marginLeft: 755}} title="Share"></Button>
<Button style={{width: 65, height: 45, marginLeft: 688, marginTop: -45}} title="Like"></Button>
</View>
</View>
</View>
)
}
}

当我在TextInput组件中键入文本时，如何使我的文本显示在下面的框中？我知道我需要在Newsfeed类中实现一个函数，但我现在知道如何实现了。请帮帮我！

Answer 1

class Newsfeed extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
};
}
render() {
return (
<View style={{ alignItems: 'center' }}>
<Text style={{ fontSize: 50 }}>Junior Facebook</Text>
<TextInput
onChangeText={(v) => this.setState({ inputValue: v })}
style={{ borderStyle: 'solid', borderWidth: 2, marginLeft: 650, width: 200, height: 40 }}
value={this.state.inputValue}
/>
<Text>{this.state.inputValue}</Text>
</View>
);
}
}