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