react-native – 将Native Native数据反应到另一个组件

2023年7月5日 235次阅读

我是React Native的新手,并尝试构建一个Messenger应用程序,我有两个组件Search和Messenger.我正在努力将我从Search获得的数据传递给Messenger.

搜索组件查找用户(接收方)和我想要进行通信的发件人但在搜索中找到用户后我想将该用户传递给Messenger,以便我可以与在< Search>中找到的特定用户聊天零件.

此外,搜索组件具有将显示用户日历等的视图..所以理想情况下我不想使用< 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()
            },

最佳答案 我迟到了回答,但我用不同的方式使用道具.

我有两个组成部分.

> Splash.js
> Home.js

我将数据(让我们取String)从Splash.js传递给Home.js.

第一个组件(发件人)

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

第二部分(接收器)

this.props.navigation.state.params.user_name

希望这会对你有所帮助.

点赞