在加载相同组件但具有不同数据的路由之间反应导航滑动答案

【问题标题】：React navigation swipe between routes that load the same component but with diffrent data在加载相同组件但具有不同数据的路由之间反应导航滑动
【发布时间】：2021-07-20 21:32:21
【问题描述】：

我是反应导航的新手，但我正在尝试制作一个天气应用程序。我希望用户能够保存多个位置，并通过向右滑动切换到不同的位置。所以组件保持不变，但数据会发生变化。

有谁知道我如何做到这一点？我目前正在使用 StackNavigator，但我没有看到任何关于此的文档。（整个位置存储我已经知道怎么做，所以它只是关于滑动导航）

【问题讨论】：

标签： reactjs react-native react-native-android react-navigation

【解决方案1】：

import {Swipeable} from 'react-native-gesture-handler';
 

const Left=()=>{
//call a funcion 
or 
return   // value after a call 
};

const Right =() => {
return (
  <View>
    <Icon
      name="trash-outline"
      size={ms(28)}
      color="black"
      onPress={() => {
        //call a function to change the data.
      }}
    />
  </View>
);


};

<Swipeable
            renderRightActions={() => Right()}
            renderLeftActions={() => Left()}>  
//your component here 
</Swipable>

您可以在组件上左右滑动，并像用户滑动一样直接调用该函数或显示一个图标来调用该函数。

【讨论】：

谢谢，我试试这个看看是不是解决办法

【解决方案2】：

对于可能想要达到同一点的人。我想通了，我使用了一个普通的平面列表来显示不同的位置。我将项目设为全宽并将这些道具添加到平面列表组件中。

snapToAlignment={"start"}
decelerationRate={"fast"}
pagingEnabled
style={{ width: "100%", height: "100%" }}

这将使项目全宽和全高，并且当您向左或向右滑动时它会对齐。

【讨论】：