React Native 在BottomTabNavigator中将属性传递到选项卡屏幕

我在使用react-native的BottomTabNavigator将props传递给我的TabScreens时遇到了困难。我尝试了几种不同的方法。如果不使用props，Tab.Screen看起来如下所示：

<Tab.Screen
  name='Visits'
  component={VisitsTab}
  options={{
    tabBarLabel: 'Visits',
    tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
  }}
/>

所以我试着这样做：

<Tab.Screen
  name='Visits'
  component={(props) => <VisitsTab {...props} />}
  options={{
    tabBarLabel: 'Visits',
    tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
  }}
/>

这仍然不起作用，因为我在VisitsTab中注销的属性是undefined-换句话说，VisitsTab没有接收props。澄清一下，props在props上传递的MainScreen中可用。
顺便说一下，我也尝试了这个，但得到同样的问题：

<Tab.Screen
    name='Visits'
    options={{
      tabBarLabel: 'Visits',
      tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
    }}
  >
    {(props) => <VisitsTab {...props} />}
  </Tab.Screen>

此底部选项卡导航器的完整导航如下所示：

import { VisitsTab } from './tabs/VisitsTab';
import { ChartTab } from './tabs/ChartTab';
import { GoalsTab } from './tabs/GoalsTab';

export const MainScreen = (props) => {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        title: 'Patient',
        headerLeft: () => (
          <Feather
            name='chevron-left'
            size={24}
            onPress={() => props.navigation.goBack()}
          />
        ),
      }}
      initialRouteName={'Visits'}
    >
      <Tab.Screen
        name='Visits'
        component={(props) => <VisitsTab {...props} />}
        options={{
          tabBarLabel: 'Visits',
          tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Chart'
        component={ChartTab}
        options={{
          tabBarLabel: 'Charts',
          tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Goals'
        component={GoalsTab}
        options={{
          tabBarLabel: 'Edit Goals',
          tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
        }}
      />
    </Tab.Navigator>
  );
};

顺便说一下，有点令人沮丧的是，底部标签导航器的documentation页面实际上并没有解决如何传递 prop 。

导航框架不传递组件（确切地说是屏幕）的属性。属性从父组件传递到其子组件。在编写component={Visits}时，我们不示例化实际的JSX组件。因此，没有属性要传递。
为了在导航过程中传递信息，我们使用route params。下面是一个示例：navigation.navigate("Visits", {x: 42}).
然而，如果Visits被认为是某个导航器的初始屏幕，那么我们实际上从未进行过导航，因此，上述方法没有帮助。
出于这个原因，react-navigation框架为屏幕添加了initialParams prop，它们在某个导航器的屏幕中定义。

<Tab.Screen
        name='Visits'
        component={VisitsTab}
        initialParams={props}
      />

其中props是任何对象，使用不同的名称可能更好，因为它们不是实际的 prop 。
然后，在屏幕中访问它们。

function VisitsTab({route}) {
    const params = route?.params

    return (...)
}

我们可以通过params访问传递的信息。

React Native 在BottomTabNavigator中将属性传递到选项卡屏幕

1条答案

相关问题

热门标签

最新问答