Question

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

<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 的东西：

Answer 1

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

Answer 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,
        },
 }} />

在本机导航中自定义标题

2 个答案: