react-native - 将 native 传递数据 react 到另一个组件

Question

我是 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()
            },

Answer 1

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

我有 两个组件 .

Splash.js

Home.js

我正在传递来自 Splash.js 的数据(让我们取 字符串 )至 Home.js .

第一个组件(发件人)

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

第二个组件(接收器)

this.props.navigation.state.params.user_name

希望这会帮助你。