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

【问题标题】：Navigate to same screen with different parameters using - ReactNavigation : React Native使用不同的参数导航到同一屏幕 - ReactNavigation : React Native
【发布时间】：2020-04-23 07:52:30
【问题描述】：

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

下面是我的代码：

  <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>

【问题讨论】：

您是否遇到了特定问题，或者您能否更具体地了解您希望通过导航传递哪些参数？因为看起来你已经在传递一些参数了。
你想传递哪些不同的参数？
我刚刚添加了一个图像，所以滑块中的圆形图像是类别。我想根据选择重新渲染页面。目前，它正在显示来自电话类别的产品。 @wbd
@GauravRoy 刚刚添加了一张图片，请检查。我正在尝试在同一页面上打开类别数据。

标签： reactjs react-native react-redux react-router

【解决方案1】：

您可以添加唯一键：

this.props.navigation.navigate({ routeName: route, params: params, key: route + params.id })

【讨论】：

这模仿navigation.push()我猜

【解决方案2】：

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

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

(navigation prop)

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

【讨论】：

确实我不是在寻找多个屏幕。非常感谢您的时间和分享知识。我会尽力回复你。 :)