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;

當前，當用戶在平面列表中選擇一行時，我可以導航到下一個屏幕，但是似乎無法弄清楚如何在兩者之間傳遞適當的數據。

如果您需要其他任何信息，請告訴我。我很樂意相應地編輯我的問題

任何幫助， 不勝感激！

Answer 1

導航到下一個屏幕時，可以通過參數發送用戶信息。 在onPressItem函數內部，進行如下編輯：

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

然后您可以在下一個屏幕上通過

this.props.navigation.state.params.user

編輯：

將_renderItem函數更改為此：

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