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

React-Native：通过FlatList Selection

1 个答案: