时间戳

首页 > 解决方案 > 反应导航 headerTitle 选项无法呈现视图

react-native - 反应导航 headerTitle 选项无法呈现视图

问题描述

我正在尝试使用反应导航 v5 将视图呈现为自定义标题

我的代码：

<Stack.Navigator
 screenOptions={{
   headerTitle: <View> <Text> a </Text><Text> b </Text> </View>
}}>
  <Stack.Screen name="Tab" component={tabNavigator}/>
</Stack.Navigator>

我也试过

const Header = () => <View> <Text> a </Text> <Text> b </Text> </View>

<Stack.Navigator
 screenOptions={{
  headerTitle: <Header />
  }}
>
   <Stack.Screen name="Tab" component={tabNavigator}/>
</Stack.Navigator>

我收到以下错误：必须在组件内呈现文本字符串

反应导航文档显示了一个带有图像而不是文档的自定义标题的示例

我认为我正在尝试做的事情是可能的

标签： react-nativereact-navigation

解决方案

您需要为标题标题声明新组件。

class HeaderTitle extends React.Component {
  render() {
    return {
      <View> <Text> a </Text><Text> b </Text> </View>
    }
  }
}

并且您需要使用 header 而不是 headerTitle 才能使用 View。

<Stack.Navigator
  screenOptions={{
    headerTitle: <HeaderTitle />
}}>
  <Stack.Screen name="Tab" component={tabNavigator}/>
</Stack.Navigator>

或者您可以使用此代码。

static navigationOptions = {
  // headerTitle instead of title
  headerTitle: <HeaderTitle />,
};

/* render function, etc */

推荐阅读