React Native 如何将数据从一个选项卡导航器发送到另一个？

j8ag8udp 于 2022-12-19 发布在 React

关注(0)|答案(1)|浏览(121)

我有一个a结构，如：

<Tab.Navigator
            
            }}>
                <Tab.Screen name="Train" component={Train} options={{
                    tabBarIcon: ({focused}) => (
                        <View>
                            <Image
                            source={focused ? require('../assets/images/train_use.png') : require('../assets/images/train.png') }
                            style={{
                                width: 50,
                                height: 50,
                            }}
                            resizeMode='contain'/>
                        </View>
                    ),
                }}/>
                
                <Tab.Screen name="Result" component={Result} options={{
                tabBarButton: () => null,
                tabBarStyle: { display: "none" }}}/>

                <Tab.Screen name="Statistics" component={Statistics} initialParams={{ wordsInText: 0 }} options={{
                    tabBarIcon: ({focused}) => (
                    ),
                }}/>
                <Tab.Screen name="Profile" component={Profile} options={{
                tabBarIcon: ({focused})>
                ),
                }}/>
            </Tab.Navigator>

我需要发送参数从栈'火车'到栈'统计'，我怎么做，请帮助

const [count, setCount] = useState(0); // I need to take this value in Train component

//and take it in the Statistics component

我试着：

routse.params.count

但是不管用，请帮帮忙

react-native

来源：https://stackoverflow.com/questions/74827926/how-to-send-data-from-one-tab-navigator-to-another

1条答案

按热度按时间

ubbxdtey1#

尝试将count和setCount作为组件参数传递：

import {Button, Text, View} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {useState} from "react";

const Tab = createBottomTabNavigator();

function Train({count, setCount}: { count: number, setCount: Function }) {
    return (
        <View>
            <Text>Train: {count}</Text>
            <Button onPress={() => setCount(count + 1)} title={'up'}/>
        </View>
    );
}

function Result({count, setCount}: { count: number, setCount: Function }) {
    return (
        <View>
            <Text>Result: {count}</Text>
            <Button onPress={() => setCount(count + 1)} title={'up'}/>
        </View>
    );
}

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <SafeAreaProvider>
            <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen 
                        name="Train" 
                        component={() => <Train count={count} setCount={setCount}></Train>}
                    />
                    <Tab.Screen 
                        name="Result" 
                        component={() => <Result count={count} setCount={setCount}></Result>}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>
    );
}

赞(0）回复(0）举报 2022-12-19

我来回答

React Native 如何将数据从一个选项卡导航器发送到另一个？

1条答案

相关问题

热门标签

最新问答