Question

我有一个最终用户页面，可以从api上获取该页面，以及结果如何以列表项的形式显示在平面列表中。

我希望每个用户都有一个页面显示其信息，但不为每个用户创建userX.js。因此，应该只有1个页面是动态的。

我的Endusers.js视图：

return (
    <View style={styles.container}>

        <View style={styles.headerContainer}>
            <SearchBar
                showLoading
                placeholder={`Suchen: Name, Email oder Land...`}
                lightTheme
                round
                onChangeText={text => this.searchFilterFunction(text)} />
        </View>

        <View style={styles.listContainer}>
            <FlatList
                style={styles.list}
                data={this.state.data}
                renderItem={({ item }) =>
                    <ListItem
                        titleStyle={styles.item}
                        subtitleStyle={styles.item}
                        title={`${item.strName} | ${item.strLand}`}
                        subtitle={`${item.strEmail}`}
                        containerStyle={{ borderBottomWidth: 0 }}
                        onPress={() => this.props.navigation.push('Userpage')}
                    />}
                keyExtractor={id => id}
            />
        </View>

    </View>
)

我的提取方法：

fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
        this.setState({
            data: upper(responseJson.sort((a, b) => (a.strName - b.strName))),
            loading: false,
            error: responseJson.error
        })
        this.searchArray = responseJson;
    })
    .catch((error) => {
        console.log(error)
    })

我的构造函数：

constructor() {
    super()
    this.state = {
        loading: true,
        data: [],
        error: null
    }
    this.searchArray = [];
}

在Endusers.js视图中，当我单击列表项时，Userpage.js应显示所单击用户的信息。

我应该如何处理这个问题？我需要什么关键词谷歌/研究找到解决方案？我不是她，所以只能复制粘贴请不要误解这个问题^^

Answer 1

您可以在按下导航键时发送参数：

 this.props.navigator.push({
      component: MyScene,
      title: 'Scene ' + nextIndex,
      passProps: {index: nextIndex},
    });

您可以以passProps的身份发送item，我想其中包含有关您的用户的详细信息，例如： passProps: {item: item}

希望我能提供帮助，以及react-native文档https://facebook.github.io/react-native/docs/navigation的更多详细信息。

FlatList Onpress显示页面，其中包含每个用户的json数据

1 个答案: