我是 React Native 的新手,正在尝试构建一个 Messenger 应用程序,我有 2 个组件 Search 和 Messenger。我正在努力将我从 Search 获得的数据传递给 Messenger。
搜索组件找到用户(接收者),我是发件人,我想沟通,但在搜索中找到用户后,我想将该用户传递给 Messenger,以便我可以与在 <Search>
中找到的特定用户聊天成分。
此外,搜索组件具有显示用户日历等的 View 。所以理想情况下我不想使用 <Messenger>
在 Search 的 render() 方法中,因为它将在 Search 组件中包含 Messenger 组件功能,这会破坏 <Search>
的目的成分。
所以我的代码是:
'use strict';
var Search = React.cerateClasss({
getDefaultProps: function () {
return {
date: new Date(),
singerName:''
};
},
getInitialState: function () {
return {
date: this.props.date,
artistName: '',
artistUserId: 1,
maxNoArtist: 0,
imagePath: '../common/images/1.png',
user: null
}
},
getArtistName: function () {
var artist = [];
var query = new Parse.Query(Parse.User);
query.equalTo('userId', this.state.artistUserId);
return query.first({
success: (result) => {
this.setState({artistName: result.get('name')});
this.props.singerName= result.get('name');
this.setState({imagePath: result.get('image').url()});
},
error: (data, error) => {
console.log('Error occured : ' + error.message())
}
});
},
render: function () {
if (!this.state.user) {
return <View style={styles.container}>
<Text style={styles.label}> Loading.... </Text>
</View>
}
var username = this.state.user.get('username');
return (
<View style={styles.container}>
<ResponsiveImage source={{uri:this.state.imagePath}} initHeight="200" initWidth="400"/>
<Text style={styles.label}>
{this.state.artistName}
</Text>
<View style={styles.innerButtonView}>
<Button text={'Onki'} onPress={this.getPreviousArtistName}/>
<Button text={'Indiki'} onPress={this.getNextArtistName}/>
</View>
<CalendarPicker
selectedDate={this.state.date}
onDateChange={this.onDateChange}
/>
<View style={styles.innerButtonView}>
<Button text={'Cyk'} onPress={this.onLogoutPress}/>
<Button text={'Habarlas'} onPress={this.onPress}/>
</View>
<Messenger singerName={this.props.singerName}></Messenger> // BREAKS SEARCH COMPONENT PURPOSE - INCLUDES MESSENGER FEATURES IN TO SEARCH COMPONENT
</View>
);
},
})
var Messenger = React.createClass({
getInitialState: function () {
return {
greeting: 'Salam',
date: new Date(),
errorMessage: '',
user: null,
olderMessageTextFrom: [],
olderMessageTextTo: [],
olderMessageDateFrom: [],
olderMessageDateTo: [],
earlierMessages: []
}
},
componentWillMount: function () {
Parse.User.currentAsync().then((user) => {
this.setState({user: user})
}
)
},
getMessages() {
return [
{
text: this.state.greeting,
name: this.props.singerName,
image: require('../common/images/1.png'),
position: 'left',
date: new Date()
},
最佳答案
我迟到了回答,但我使用 props
以不同的方式做了.
我有 两个组件 .
Splash.js
Home.js
我正在传递来自
Splash.js
的数据(让我们取 字符串 )至 Home.js
.第一个组件(发件人)
this.props.navigation.navigate('Home', {user_name: userName})
第二个组件(接收器)
this.props.navigation.state.params.user_name
希望这会帮助你。
关于react-native - 将 native 传递数据 react 到另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35597423/