Question

这是我关于SO的第一篇文章，因此，如果我没有遵循正确的格式，则表示歉意。我正在构建我的第一个应用程序，遇到了一个大问题。它是由React Navigation v 5.x中的标签导航器构建的。

我想要实现的是：

对其中一个屏幕上的数据列表进行更改。
这些更改是否会影响另一个屏幕上发生的事情。

我已经尝试过这个https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props（我无法将道具放下）

和此React Native - pass props from One screen to another screen (using tab navigator to navigate)（已弃用的react-navigation版本）

和这个https://stackoverflow.com/a/56764509/12974771（也是反应导航的旧版本）

和Redux，但当前版本的react导航没有可用的示例。

我对此深信不疑，确实需要逐步实现这一目标。这是我要执行的操作的粗略草图：https://i.stack.imgur.com/rbSCL.png

我想到的方式是通过回调将父状态作为道具发送出去，但是我找不到在最新版本的React Navigation中通过屏幕组件发送道具的方法... < / p>

这是我的导航设置：

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>

我已经读过这个https://reactnavigation.org/docs/redux-integration，但对我来说却毫无意义。这如何适合组件树？哪里去了？请帮忙！

Answer 1

您可以使用属性'children'来传递像jsx这样的元素类型，而不是通过react-native建议使用属性'component'。

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

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

必须使用'（）=>'，因为属性子级需要一个返回jsx元素的函数，这是有功能的。

Answer 2

在代码注释中查看答案。

<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.
/>

看起来您正在为屏幕“ AdminTab”传递“ component”属性的内联函数（例如component={() => <SomeComponent />}）。传递内联函数将导致组件状态在重新渲染时丢失，并由于重新创建每个渲染而导致性能问题。您可以将功能作为子级传递给“屏幕”，以实现所需的行为。

Answer 3

我还需要将一个函数传递给 screen 以便在所有屏幕上呈现弹出窗口，但需要从特定屏幕显示弹出窗口。这是我的解决方案。现在忘记重新渲染（性能）问题。

       <Tab.Screen
        initialParams={{
            onRemovePress: () => {
              props.setShowPopup(true)
            }
          }}
        name="Followers"
        component={Followers}
        options={{
          tabBarLabel: ({ focused, color }) => {
            return (
              <Text style={{ color: focused ? light.tintColor : light.black, marginBottom: 10 }}>{`${props.numOfFollowers} Followers`}</Text>
            )
          }
        }}
      />

Answer 4

为了在<MyTests />内向<Tab.Screen />组件发送道具：

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

Answer 5

您可以使用以下

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

由于重新渲染组件，您可能会警告当前状态警告丢失。但是道具会起作用。如果您要复制当前状态的道具，则可以使用{... props}

Answer 6

<Tab.Screen
   name='tabName'
   children={()=>{
    return(
      <CustomComponent prop={yourProp} />
    )
   }}
  />

今天第一次研究这个，发现它很有帮助只是想给一个小的更新，对于@react-navigation/bottom-tabs，v^5.11.10，你需要确保你不再传入Tab.screen 中的组件 prop 并确保子项中的匿名函数返回一个元素/组件。

Answer 7

如果您使用 ScreenMap 来渲染屏幕，您可以这样做：

_renderScene = SceneMap({
    first: () => <MyEvents {...this.props} date={this.state.date} />,
    second: () => <F4FEvents {...this.props} date={this.state.date} />,
});

如何通过标签导航器将道具传递到屏幕组件？

7 个答案: