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>

这是我的代码：

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

navigation.setOptions({
标题：(
左文本{'}
{' '}
右文本
),
});

这给了我，伪视觉：

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

现在，我已经尝试了

和

的各种布局，但似乎无法获得我想要的堆叠视觉效果。我尝试过用一个

和最后一个

来包装它，但是我相信

标题属性需要一个
或指定给它的类型字符串

有什么建议可以让我在我已经拥有的东西下面（并居中）找到另一个
吗？
你需要有一个
视图
，它在
视图
中作为一行，作为一列。在下面的示例中，第一个
视图作为
flexDirection:“列”
作为默认值

<View style={{backgroundColor: "#ff0000"}}>
  <View style={{flexDirection: 'row', justifyContent: "space-between", backgroundColor: "#00ff00"}}>
    <Text>Left</Text>
    <Image
      source={{uri: "https://miro.medium.com/max/712/1*EnF9uIN_u2_X7ey24lB7Tg.png"}}
      style={{ resizeMode: 'contain', width: 25, height: 25 }}
    />
    <Text>Right</Text>
  </View>
  <Text style={{textAlign: "center"}}>Bottom</Text>
</View>


左边
赖特
底部

通过组合导航设置并将其移动到
堆栈屏幕
我能够得到我想要的。我的问题似乎是我试图在
BottomTabNavigator
中设置标题选项。相反，如果我传入一个自定义的“Header”组件，它将按照我想要的方式呈现。像这样：

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


}}
组件={BottomTabNavigator}
/>
不能有孩子。使用
作为包装。因此，我看到零食可以工作，但在这种情况下，它只是一个常规组件，而我所做的是返回到导航选项中。结果是，您的示例得到了与我的代码相同的结果。