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