在反应本机导航中自定义标题答案

【问题标题】：Customize header in react native navigation在反应本机导航中自定义标题
【发布时间】：2021-03-07 19:06:34
【问题描述】：

在我的应用主屏幕中，我想自定义标题以使左右两个图标可以使用：

<HomeStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        title: '',    
        headerLeft: () => (
          <View style={{ marginLeft: 10 }}>
            <Icon.Button
              name="ios-menu"
              size={25}
              color="#000000"
              backgroundColor={COLORS.primary}
              onPress={() => navigation.openDrawer()}
            />
          </View>
        ),
        
        headerRight: () => (
          <View style={{ marginLeft: 10 }}>
            <Icon.Button
              name="location-outline"
              size={25}
              color="#000000"
              backgroundColor={COLORS.primary}
              onPress={() => navigation.openMap()}
            />
          </View>
        ),
 }} />
  </HomeStack.Navigator>

我想添加其他内容，但要位于中心，这将根据我的需要进行定制，但我不知道如何实现它，因为没有任何东西叫做 headerCneter：

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

也许您可以利用堆栈导航器中的header 选项？然后，您可以使用路由参数从那里自定义标题。

【讨论】：

但是路由参数是用来传递参数的，但是我例如如果想在标题的中心添加搜索栏，在左边的右边添加两个图标，你能举一个简单的例子吗？跨度>
是的，标题只是一个 React 元素。您可以创建自己的搜索栏视图并向其添加逻辑。

【解决方案2】：

你可以在 headerTitle 中传递 react 组件：

 <HomeStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        headerTitle: () => {
          return (
            <View style={st.horizontalRow}>
              <LeftIcon />
              <TextInput
                placeholder="search"
              />
              <RightIcon />
            </View>
          );
        },
        headerTitleAlign: 'left',
        headerTitleContainerStyle: {
          left: 40,
          right: 0,
        },
 }} />

【讨论】：