How to pass props to Screen component with a tab navigator?

一笑奈何 提交于 2021-01-20 19:08:16

问题


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!


回答1:


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.




回答2:


Check out the answer in the code comments.

<Tab.Screen
  name="AdminTab"
  children={() => <AdminPage userData={this.props.userSettings} />}
  // component={() => <AdminPage userData={this.props.userSettings} />} <<<---- Although this will work but passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour. You can safely remove the component attribute post adding children.
/>

Looks like you're passing an inline function for 'component' prop for the screen 'AdminTab' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.




回答3:


In order to send props to <MyTests /> component, inside <Tab.Screen />:

<Tab.Screen name="My tests">
  {() => <MyTests myPropsName={myPropsValue} />}
</Tab.Screen>



回答4:


you can use the following

<Tab.Screen name="Favourite" component={() => <RecipeList CategoryId={0}></RecipeList>}/>

You may gate a warning loss of current state due to re-render the component. but the props will work. If you want to copy current state props then you can use {...props}



来源:https://stackoverflow.com/questions/60439210/how-to-pass-props-to-screen-component-with-a-tab-navigator

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!