代码之家 › 专栏 › 技术社区 › jACOB Alex

如何在React native中将数据从多个屏幕发送到单个屏幕

react-navigation-stack routes react-native typescript javascript

jACOB Alex · 技术社区 · 1 年前

我基本上有四个屏幕,我正在将数据发送到其他屏幕屏幕例如,我从发送数据 主页到列表屏幕 具有中的一些项目 平面主义者 然后我也从发送其他数据 SearchScreen到ListScreen 但问题就在我去的时候 TabScreen中的ListScreen 或者它给了我错误 {item.name}

 <TouchableOpacity onPress={() => navigation.navigate(MainScreens.ListScreen, {
                     item: item, 
                     })} >
                       
                </TouchableOpacity>

还有

<TouchableOpacity onPress={() => navigation.navigate(MainScreens.ListScreen, {
                     item: item, 
                     totalFixed: totalPrice,
                     })} >
                       
                </TouchableOpacity>

我的问题是如何在ListScreen中区分它们知道这两个数据彼此不同

export const ListScreen: React.FC<ListScreenProps> = ({ route, navigation }) => {
    const { item, totalFixed } = route.params || {};

这里我有两种类型的物品 项目名称 和 项目分类 但我犯了错误下面我有个错误 项目价格 找不到,因为我带着主屏幕来的。

 <Text >Total: AED {item.price}</Text>

1 回复 | 直到 1 年前

ABDULLAH 1 年前

<TouchableOpacity onPress={() => navigation.navigate(MainScreens.ListScreen, {
                     item: item, 
                     source:'home'
                     })} >
                </TouchableOpacity>

在这里也添加源代码,这样您就可以记住屏幕数据

<TouchableOpacity onPress={() => navigation.navigate(MainScreens.ListScreen, {
                         item: item, 
                         source:'searchScreen'
                         })} >
                    </TouchableOpacity>

然后在ListScreen中获得这样的数据

export const ListScreen: React.FC<ListScreenProps> = ({ route, navigation }) => {
const { item, totalFixed, source } = route.params || {};

现在在ListScreen中添加文本,如下所示

{source === 'home' && (
                        < Text>Total: AED {item.price}</Text >)}
                    {source === 'searchScreen' && (
                        <Text>Total: AED {totalFixed}</Text>)}

推荐文章