React-Native：通过FlatList选择传递数据

Question

我当前正在尝试通过箭头函数传递信息，该函数在用户选择扁平列表中的一行时被调用。但是，我似乎无法弄清楚如何恰当地将数据传递到下一个屏幕。

我目前的实现可以在下面看到：

import ... 

class ViewFollowingScreen extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     loading: false, 
     allUsers: [], 
     data: [], 
     page: 1, 
     seed: 1, 
     error: null, 
     refreshing: false 
    } 
    } 

    static navigationOptions = {...}; 

    searchUsers(searchBarText) {...}; 

    _onPressItem =() => { 
    /** 
    HOW DO YOU PASS THE INFORMATION OF THE SELECTED USER TO THE ViewUser SCREEN?? 
    **/ 
    this.props.navigation.navigate('ViewUser')//Needs to include user information 
    }; 

    componentDidMount() {...}; 

    makeRemoteRequest =() => {...}; 

    renderSeparator =() => {...}; 

    renderHeader =() => {...}; 

    renderFooter =() => {...}; 

    _renderItem = ({item}) => (
    <TouchableOpacity onPress={this._onPressItem}> 
     <ListItem 
     roundAvatar 
     title={`${item.name.first[0].toUpperCase() + item.name.first.substr(1,item.name.first.length)} ${item.name.last[0].toUpperCase() + item.name.last.substr(1,item.name.last.length)}`} 
     subtitle={'Followers: 15' } 
     avatar={{ uri: item.picture.thumbnail }} 
     containerStyle={{borderBottomWidth: 0}} 
     /> 
    </TouchableOpacity> 
); 

    render() { 
    return (
     <ViewContainer> 
     <List containerStyle={{borderBottomWidth: 0, borderTopWidth: 0}}> 
      <FlatList 
      data={this.state.data} 
      renderItem={this._renderItem} 
      keyExtractor={(item) => item.email} 
      ItemSeparatorComponent={this.renderSeparator} 
      ListHeaderComponent={this.renderHeader} 
      ListFooterComponent={this.renderFooter} 
      /> 
     </List> 
     </ViewContainer> 
    ); 
    } 
} 

module.exports = ViewFollowingScreen; 

我目前能够当用户选择在flatlist行导航到下一个画面，但我似乎无法确切地弄清楚如何在两者之间传递适当的数据。

请让我知道如果你需要任何额外的信息。我很乐意编辑我的问题因此

任何帮助是极大的赞赏！

Answer 1

当您导航到下一个屏幕时，您可以通过参数发送用户信息。里面你onPressItem功能编辑如下： -

_onPressItem =() => { 
    this.props.navigation.navigate('ViewUser',{ 
     user: user //your user details 
    }) 
    }; 

，然后你可以通过

this.props.navigation.state.params.user 

编辑

change your _renderItem function as below :- 

    _renderItem = ({item}) => (
    <TouchableOpacity onPress={()=>{this._onPressItem(item)}}> 
     <ListItem 
     roundAvatar 
     title={`${item.name.first[0].toUpperCase() + item.name.first.substr(1,item.name.first.length)} ${item.name.last[0].toUpperCase() + item.name.last.substr(1,item.name.last.length)}`} 
     subtitle={'Followers: 15' } 
     avatar={{ uri: item.picture.thumbnail }} 
     containerStyle={{borderBottomWidth: 0}} 
     /> 
    </TouchableOpacity> 
) 

和你onPressItem为获得下一个屏幕上的用户详细信息： -

_onPressItem = (user) => { 
    this.props.navigation.navigate('ViewUser',{ 
     user: user //your user details 
    }) 
    };