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 
    }) 
    };