React native 自定义第一次渲染反应本机选项卡导航

是否有人知道如何设置initialroute，但不知道如何设置part off选项卡。屏幕导航？ 我想将主屏幕设置为默认屏幕，当我打开应用程序时，没有从底部选项卡选择焦点

当我按下浏览标签时，它会显示浏览页面。所以当我点击后退按钮时，我也可以进入主屏幕。

---

这比您希望的要复杂得多，但通过创建自定义选项卡栏组件，我实现了一些功能：

const CustomTabBar = ({
  state,
  navigation,
  descriptors,
  screenHiddenInTabs,
}) => {
  return (
    <View
      style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
      }}>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate(state.routes[0].name);
        }}
        style={{
          position: 'absolute',
          height: 30,
          width: '100%',
          justifyContent: 'center',
          backgroundColor: 'white',
        }}>
        <Text style={{ padding: 5 }}>{'\u003c Back to Home'}</Text>
      </TouchableOpacity>
      <View
        style={{
          flexDirection: 'row',
          backgroundColor: 'white',
          height: 30,
          justifyContent: 'space-around',
          alignItems: 'center',
          position: 'absolute',
          width: '100%',
          bottom: 0,
        }}>
        {state.routes.map((route, index) => {
          const isFocused = state.index === index;

          const { options } = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          return route.name !== screenHiddenInTabs ? (
            <TouchableWithoutFeedback onPress={onPress}>
              <Text style={{ color: isFocused ? 'blue' : 'black' }}>
                {label}
              </Text>
            </TouchableWithoutFeedback>
          ) : null;
        })}
      </View>
    </View>
  );
};

// Pass the CustomTabBar component to the tabBar property
function YourTabs() {
  return (
    <Tab.Navigator
      tabBar={(props) => <CustomTabBar {...props} screenHiddenInTabs="Home" />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Browse" component={BrowseScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

const CustomTabBar=({
国家,，
航行
描述符，
屏幕显示Denintabs，
}) => {
返回(
{
navigation.navigate（state.routes[0].name）；
}}
风格={{
位置：'绝对'，
身高：30，
宽度：“100%”，
为内容辩护：“中心”，
背景颜色：“白色”，
}}>
{'\u003c返回主页'}
{state.routes.map（（路由，索引）=>{
const isFocused=state.index==index；
const{options}=描述符[route.key]；
常数标签=
options.tabBarLabel！==未定义
？options.tabBarLabel
：options.title！==未定义
？选项。标题
：route.name；
const onPress=（）=>{
const event=navigation.emit({
键入：“tabPress”，
目标：route.key，
});
如果（！isFocused&！event.defaultPrevented）{
导航.导航（路线.名称）；
}
};
return route.name！==screenHiddenInTabs(
{label}
)：null；
})}
);
};
//将CustomTabBar组件传递给tabBar属性
函数YourTabs（）{
返回(
}>
);
}

这里的想法是，我们不在选项卡导航器中的某个路由的选项卡栏中呈现选项卡，其中路由名称等于我们添加的

ScreenHiddeInTabs

属性的值

这样，如果我们将

screenhiddenintab

属性设置为

“Home”

，则与该管线名称关联的选项卡导航器中的屏幕将在第一次渲染时显示，但不会在选项卡栏上显示为选项卡

此自定义选项卡栏还实现了顶部栏，允许您返回选项卡导航器中的第一个屏幕，即您的案例中的主屏幕

一定要考虑到这一点，因为我使用了绝对定位，以便在顶部和按钮上放置一个条，您可能需要在选项卡导航器内的屏幕上增加额外的边距

---

---

我在这个答案中使用了自定义选项卡栏：作为我在上面创建的自定义选项卡栏的模板。我建议看一下这里的答案，因为我已经从该栏中删除了一些功能，以便使示例代码不那么冗长。

@BasvanderLinden因为我需要主屏幕作为所有屏幕的默认屏幕，当显示主屏幕时，不选择选项卡导航。或者我可以在这种情况下使用自定义路线导航吗？