javascript - React Native:如何将 Prop 从一个屏幕导航到另一个屏幕

我试图将一些行数据从列表传递到下一个屏幕以显示详细信息，但似乎无法实现。
这是我导航时通过道具的方式：

_renderRow(row,sectionId, rowId, highlightRow) {
      var self = this;
      let navigate=this.props.navigation;
               return (
            <TouchableOpacity onPress={() => navigate('ChatList',{row})}>

........//ignored code

在另一个屏幕上的ChatList.js上：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Image
} from 'react-native';

import { StackNavigator } from 'react-navigation';


const ChatList = ()  => {

  return (
    <View>
    </View>
  );
}

ChatList.navigationOptions = {
//trying to set the title from the data sent around here
  title: 'ChatList Title',
  headerStyle: {
            backgroundColor: '#2196F3',
        },
  headerTitleStyle: {
      color: 'white',
  },
  headerBackTitleStyle: {
      color: 'white',
  },
  headerTintColor: 'white',
};


export default ChatList

另外要注意的是，与docs from reactnavigation不同，我在stacknavigation上有不同的实现。在这里https://gist.github.com/SteveKamau72/f04b0a3dca03a87d604fe73767941bf2签出我的整个实现

这是_renderRow所在的完整类：

ChatGroup.js

/** ChatGroup.js**/
//This code is component for file App.js to display group of chats

import React, { Component } from 'react';
import {
  StyleSheet,
  ListView,
  Text,
  View,
  Image,
  TouchableOpacity
} from 'react-native';

const data = [
    {
        name: "Kasarini",
        last_chat: {
            updated_at:"22:13",
            updated_by: "Steve Kamau",
            chat_message: "Lorem Ipsum is pretty awesome if you know it"
        },
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg"

    },
    {
        name: "Kabete",
        last_chat: {
            updated_at:"20:34",
            updated_by: "Tim Mwirabua",
            chat_message: "Lorem Ipsum is pretty awesome if you know it"
        },
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg"

    },
    {
        name: "Kiambuu",
        last_chat: {
            updated_at:"19:22",
            updated_by: "Maureen Chubi",
            chat_message: "Lorem Ipsum is pretty awesome if you know it"
        },
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg"

    },
    {
        name: "UnderPass",
        last_chat: {
            updated_at:"17:46",
            updated_by: "Faith Chela",
            chat_message: "Lorem Ipsum is pretty awesome if you know it"
        },
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg"

    },
]

export default class UserListView extends Component {
    constructor() {
        super();
        const ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});

        this.state = {
            dataSource: ds.cloneWithRows(data)
        }
    }
    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this._renderRow.bind(this)}
                enableEmptySections={true} />
        )
    }

    _renderRow(row,sectionId, rowId, highlightRow) {
      var self = this;
        return (
            <TouchableOpacity activeOpacity={0.9} onPress={() => navigate('ChatList',{ user: 'Lucy' })}>
                <View style={styles.container}>
                   <Image
                          style={styles.groupChatThumbnail}
                          source={{uri: row.thumbnail}}/>
                   <View>
                        <View style={{flexDirection:'row', justifyContent:'space-between', width:280}}>
                                <Text style={styles.groupNameText}>{row.name} </Text>
                                <Text style={styles.groupUpdatedAtText}>{row.last_chat.updated_at}</Text>

                        </View>
                        <View style={{ flexDirection:'row', alignItems:'center', marginTop: 5}}>
                                <Text style={styles.groupUpdatedByText}>{row.last_chat.updated_by} : </Text>
                                <View style={{flex: 1}}>
                                        <Text ellipsizeMode='tail' numberOfLines={1}style={styles.groupChatMessageText}>{row.last_chat.chat_message} </Text>
                                </View>
                        </View>
                  </View>


                </View>
            </TouchableOpacity>
        )
    }

    _rowHasChanged(r1, r2) {
        return r1 !== r2
    }


         highlightRow() {
    alert('Hi!');
  }

}

const styles = StyleSheet.create({
  container:{
        alignItems:'center',
        padding:10,
        flexDirection:'row',
        borderBottomWidth:1,
        borderColor:'#f7f7f7',
        backgroundColor: '#fff'
      },
      groupChatContainer:{
        display: 'flex',
        flexDirection: 'row',

      },
      groupNameText:{
        marginLeft:15,
        fontWeight:'600',
        marginTop: -8,
        color: '#000'
      },
      groupUpdatedAtText :{
        color:'#333', fontSize:10, marginTop: -5
      },
      groupChatThumbnail:{
       borderRadius: 30,
       width: 50,
       height: 50 ,
       alignItems:'center'
      },
      groupUpdatedByText:{
        fontWeight:'400', color:'#333',
        marginLeft:15, marginRight:5
      },

}); 

最佳答案

在第二个屏幕上可以通过两种方式访问​​导航道具：


里面像

navigationOptions = ({navigation}) => ({title:`${navigation.state.params.name}`});

如果您访问诸如render等的任何方法，

{user}= this.props.navigation.state.params

ChatList.navigationOptions这可以写成

ChatList.navigationOptions= ({navigation}) => ({// props access here });

和const ChatList = ()在里面你可以写this.props.navigation.state.params