如何使用选项卡导航器将道具传递给 Screen 组件? [英] How to pass props to Screen component with a tab navigator?

问题描述

这是我在 StackOverflow 上的第一篇文章，如果我没有遵循正确的格式，请道歉.

我正在使用 React Navigation v 5.x 中的 tab navigator 构建我的第一个应用程序，并且在将道具从一个屏幕传递到另一个屏幕时遇到了一个大问题

我想要实现的是:

1. 对我的一个屏幕中的数据列表进行更改.
2. 让这些更改影响另一个屏幕上发生的事情.

我已经尝试过

我想到的方法是通过回调将父状态作为道具发送下来，但是在最新版本的反应导航中，我找不到通过屏幕组件发送道具的方法...

这是我的导航设置:

const Tab = createBottomTabNavigator()导出默认类 MyApp 扩展组件{构造函数(道具){超级(道具)；}使成为(){返回 (<导航容器><标签导航器screenOptions={({ route }) =>({tabBarIcon: ({focused, color, size }) =>{让 iconName;if (route.name === '我的测试') {图标名称 = 重点?'ios-list-box': 'ios-list';} else if (route.name === 'Testroom') {图标名称 = 重点?'ios-body': 'ios-body';}return <Ionicons name={iconName} size={size} color={color}/>;},})}tabBarOptions={{activeTintColor: '番茄',inactiveTintColor: '灰色',}}><Tab.Screen name=我的测试"组件={MyTests}/>//这是我想发送道具的地方//这是我想发送道具的地方</Tab.Navigator></NavigationContainer>)}}

我已阅读这篇，但对我来说毫无意义.这如何适合组件树?什么去哪里?请帮忙！

解决方案

你可以使用属性 'children' 来传递一个元素类型 jsx like 而不是属性 'component'，这是从 react-native 推荐的.

通过这种方式，您可以将道具传递给组件示例:

 }/>

必须使用 '()=>'因为属性 children 需要一个返回 jsx 元素的函数，所以它是函数式的.

This is my first post on StackOverflow, so apologies if I'm not following the correct format.

I'm building my first app using tab navigator from React Navigation v 5.x and have run into a big problem when passing props from one screen to another

What I want to achieve is to:

1. Make changes to a list of data in one of my screens.
2. Have those changes affect what happens on another screen.

I have tried this (I failed to set the props to pass down), this (Deprecated version of react-navigation) and this (Also old version of react-navigation).

and Redux but there are no examples available with the current version of react navigation.

I'm at the end of my rope with this and really need some step by step on how to achieve this. Here's a rough sketch of what I want to do:

The way I thought about it is sending the parent state down as props via callback, but I can't find a way to send props through the screen components in the up-to-date version of react navigation...

This is my navigation setup:

const Tab = createBottomTabNavigator()

export default class MyApp extends Component{

    constructor(props) {
        super(props);
    }

    render(){
        return (
            <NavigationContainer>
                <Tab.Navigator 
                    screenOptions={({ route }) => ({
                        tabBarIcon: ({ focused, color, size }) => {
                            let iconName;

                            if (route.name === 'My tests') {
                                iconName = focused ? 'ios-list-box' : 'ios-list';
                            } else if (route.name === 'Testroom') {
                                iconName = focused ? 'ios-body' : 'ios-body';
                            }

                            return <Ionicons name={iconName} size={size} color={color} />;
                        },
                    })}
                    tabBarOptions={{
                        activeTintColor: 'tomato',
                        inactiveTintColor: 'gray',
                            
                    }}>

                    <Tab.Screen name="My tests"  component={MyTests}/> //This is where I want to send props
                    <Tab.Screen name="Testroom" component={TestRoom} />  //This is where I want to send props
                    
                </Tab.Navigator>
            </NavigationContainer>
        )
    }
}

I've read this but it makes no sense to me. How does this fit into a tree of components? What goes where? Please help!

解决方案

you can use the property 'children' to pass an element type jsx like instead of the property 'component', is recomended from react-native.

On this way you can pass props to component example:

    <tab.Screen
    name="home"
       children={()=><ComponentName propName={propValue}/>}
    />

is neccesary to use '()=>' because the property children need a function that return a jsx element, it's functional.

这篇关于如何使用选项卡导航器将道具传递给 Screen 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！