时间戳

首页 > 解决方案 > React Native - 堆叠应用程序标题内容

react-native - React Native - 堆叠应用程序标题内容

问题描述

我正在尝试在使用该setOptions方法设置的导航顶部栏中堆叠内容。但是，我似乎无法垂直堆叠两条内容。相反，我只能显示单个内容。请记住，此标题栏没有真正的导航链接，纯粹是一个带有文本和图像的“标题”栏。它也在我用来实际创建导航的同一个组件中createBottomTabNavigator()。

我想要的是，伪视觉：

<Text><Image><Text>
      <Text>

这是我的代码：

navigation.setOptions({
  headerTitle: (
    <Text
      style={{
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
      }}
    >
      <Text
        style={{
          fontSize: 16,
          lineHeight: 16,
        }}
      >
        Left Text{' '}
      </Text>
      <Image
        source={require('../assets/images/icon-large.png')}
        style={{ resizeMode: 'contain', width: 25, height: 25 }}
      />
      <Text
        style={{
          fontSize: 16,
          lineHeight: 16,
        }}
      >
        {' '}
        Right Text
      </Text>
    </Text>
  ),
});

这给了我伪视觉：

<Text><Image><Text>

现在，我尝试了各种布局，<View>但<Text>似乎无法获得我正在寻找的堆叠视觉效果。我试过用 a<View>和 last来包装它，<Text>但我相信该headerTitle属性需要一个<Text>或类型的字符串分配给它。

有什么建议我可以<Text>在我已经拥有的东西下面（和居中）得到另一个吗？

标签： react-nativeexpo

解决方案

结合这一点并将导航设置移动到Stack.Screen我能够得到我想要的东西。我的问题似乎是我试图在BottomTabNavigator. 相反，如果我传入一个自定义的“Header”组件，它会以我想要的方式呈现。像这样：

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="Scroll Rack"
      options={{ headerTitle: (props) => <Header /> }}
      component={BottomTabNavigator}
    />
  </Stack.Navigator>
</NavigationContainer>

推荐阅读