[英]React Native: How to pass props navigating from one screen to another
I am trying to pass some row data from a list to next screen to display details but cannot seem to achieve it. 我试图将一些行数据从列表传递到下一个屏幕以显示详细信息,但似乎无法实现。 This is how i pass props when navigating like: 这是我导航时通过道具的方式:
_renderRow(row,sectionId, rowId, highlightRow) { var self = this; let navigate=this.props.navigation; return ( <TouchableOpacity onPress={() => navigate('ChatList',{row})}> ........//ignored code
And on the other screen ChatList.js: 在另一个屏幕上的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
Also to note, i have a different implementation on stacknavigation unlike the docs from reactnavigation .Checkout my entire implementation here https://gist.github.com/SteveKamau72/f04b0a3dca03a87d604fe73767941bf2 另外要注意,我对stacknavigation不同的实现不像从reactnavigation文档 .Checkout我的整个实施这里https://gist.github.com/SteveKamau72/f04b0a3dca03a87d604fe73767941bf2
Here is the full class from which _renderRow resides: 这是_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 }, });
There are two ways to access navigation props on second screen: 在第二个屏幕上可以通过两种方式访问导航道具:
Inside like 里面像
navigationOptions = ({navigation}) => ({title:`${navigation.state.params.name}`});
If you access inside any method like render etc is 如果您访问诸如render等的任何方法,
{user}= this.props.navigation.state.params
ChatList.navigationOptions
this could written be as ChatList.navigationOptions
可以写为
ChatList.navigationOptions= ({navigation}) => ({// props access here });
and const ChatList = ()
inside this you can write this.props.navigation.state.params
和const ChatList = ()
,您可以在其中编写this.props.navigation.state.params
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.