使用不同参数导航到同一屏幕 - ReactNavigation : React Native

slo*_*ing -2 reactjs react-router react-native react-redux

我一直在尝试在反应本机应用程序上导航到具有不同参数的同一屏幕。这是一个类别屏幕,我不希望用户返回并选择不同的类别来查看产品。我制作了一个屏幕,显示类别中的产品。

下面是我的代码:

  <View style={styles.horizontalSlider}>
         <FlatList
               horizontal
               showsHorizontalScrollIndicator={false}
               data={this.state.DataSource}
               keyExtractor={(item, index) => index.toString()} 
               extraData={this.state.selectedItem}
               renderItem= { ({item}) => (
                <TouchableOpacity onPress={(category) => navigate.push('CategoryScreen', {item})}>
                <ImageBackground style={styles.profileImgContainer} >
                <Image source={{ uri: item.images }} style={[styles.profileImg, , { borderColor: 'green', borderWidth:2 }]} />  
                </ImageBackground>
                </TouchableOpacity>
               )}
               />
            </View>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

Max*_*Max 5

如果您想使用不同的参数导航到同一屏幕并且无法返回,请使用this.props.navigation.replace('CategoryScreen', { ...new params here... })

如果您想在不导航的情况下更改当前导航参数,请使用this.props.navigation.setParams()

导航道具

但你的问题不是导航问题。您不需要多个屏幕。用react解决。您需要做的就是根据当前选择的类别(或圆形项目?)有条件地渲染列表。将此信息存储在状态中并在渲染中使用它