在React native中，将数据从一个屏幕传递到另一个屏幕，再传递到另个屏幕

Question

当使用平面列表将数据从一个屏幕路由到另一个屏幕时，我可以使用route.param来实现这一点。但是我可以把数据从第一屏发送到第二屏，从第二屏发送到三屏吗？

我应该使用什么方法？

这是我的平板数据

const nowshowingmovies = [
{
id: 1,
title: "AVATAR: The Way of Water",
url:  ("link of an Image")},
{
id: 2,
title: "Thor Love and Thunder",
url:  ("link of an Image")
},
];
export default nowshowingmovies;

这是我的第一个屏幕(平面(的代码

<FlatList
style = {{bottom:10}}
horizontal
showsHorizontalScrollIndicator = {false}
data = {nowshowingmovies}
renderItem = {({ item }) => (
<Card containerStyle = {styles.card}>
<TouchableOpacity onPress={() => {navigation.navigate('Schedule', item) }}> 
<Image style = {styles.itemPhoto}
source={{ uri: item.url }} />
<Text >{item.title} </Text>
</TouchableOpacity>
</Card>   

)}
keyExtractor = {(item) => item.id}  
/>

接下来，这就是我将其传递到下一个屏幕上的方式注意：我使用的是类扩展组件

export default class Screentwo extends Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
isReady: false,
nowshowingmovies: this.props.route.params
};
}
render(){
const item = this.props.route.params
return(
<View>
<Image style = {styles.itemPhotoBackground} source={{ uri: item.url }}>

</Image>
<Text>{item.title}</Text>
</View>
);
}
}

这部分是我不能得到的。我想再次将它传递到第三个屏幕(并再次传递到另一个屏幕(，但我无法传递，并且我正在使用类组件。

export default class ThirdScreen extends Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
isReady: false,
nowshowingmovies: this.props.route.params
};
}
render(){
return(
<View>
<Image style = {styles.itemPhotoBackground} source={{ uri: item.url }}>

</Image>
<Text>{item.title}</Text>
</View>
);
}
}

Answer 1

这取决于屏幕导航的流程。就像您从第一个屏幕传递数据一样->第二屏幕->第三个屏幕是这样的，然后你可以在导航参数上传递数据。

但如果您从除第二个屏幕之外的另一个屏幕导航到第三个屏幕，它会给您提供参数错误，以便您可以使用React redux。

在屏幕文件中导入useNavigation。我更喜欢这个而不是进口

import {useNavigation} from '@react-navigation/native;

就在像这样返回使用之前。

const navigation = useNavigation();

从第一个屏幕上按下按钮，将此屏幕名称与此名称数据一起用作数据

onPress ={()=> {
navigation.navigate('secondScreen',{
myData:paramsData})}};

在第二个屏幕上获得这样的值，并对第三个屏幕执行同样的操作。只需通过"；数据"；在第二个屏幕的导航参数中。

const secondScreen =({props}) => {
let data = props.route?.params?.myData
}

Answer 2

您应该检查导航：

onPress={() => {
navigation.navigate('MyScreen', {
myData: data,
});
}}

不要忘记const MyCurrentScreen = ({navigation}) => {

然后在您导航的"MyScreen"中，您将可以访问

const MyScreen = ({route}) => {
const data = route.params.myData;

Answer 3

更好的方法是使用redux或上下文挂钩