将Native Pass数据反应到另一个组件

Question

我是React Native的新用户并尝试构建Messenger应用程序，我有2个组件Search and Messenger。我正在努力将我从Search获得的数据传递给Messenger。

搜索组件发现用户（接收方）和我是发送方我想要进行通信但是在搜索中找到用户之后我想将该用户传递给Messenger，以便我可以与<Search>组件中找到的特定用户聊天

此外，搜索组件具有将显示用户日历等的视图。所以理想情况下我不想在搜索的render（）方法中使用<Messenger>，因为它将包含搜索组件内的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()
            },

Answer 1

好的，基于您的信息，我认为问题是您没有在Messenger组件中获得歌手名称。

首先，我将您的getArtistName方法更改为：

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')});
            // Removed the this.props.singerName = ... 
            this.setState({imagePath: result.get('image').url()});
        },
        error: (data, error) => {
            console.log('Error occured : ' + error.message())
        }
    });
}

然后在你的渲染方法中：

<Messenger singerName={this.state.artistName} />

在组件内部，您需要使用setState而不是更改props： 也就是说this.props.singerName = 'singer'是一种错误的做事方式，您应该this.setState({singerName: 'singer'});然后使用this.state.singerName

访问它

在您的信使组件中，您可以使用this.props.singerName

访问它

Answer 2

我迟到了，但我使用props以不同的方式做了。

我有两个组件。

1. Splash.js
2. Home.js

我将数据（让字符串）从Splash.js传递到Home.js。

第一个组件（发件人）

this.props.navigation.navigate('Home', {user_name: userName})

第二部分（接收者）

this.props.navigation.state.params.user_name

希望这会对你有所帮助。