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

Question

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

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

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

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

Answer 2

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

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

这将使项目具有完整的宽度和高度，并且当您向左或向右滑动时它会捕捉。

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

React navigation swipe between routes that load the same component but with diffrent data

reactjs

react-native

react-native-android

react-navigation