使用 React Navigation 设计 Header（从 V3 到 V5）

Question

因此，我正在跟随本教程尝试使用本机反应制作应用程序，它使用 react-navigation 的 v3，但我正在尝试使用 v5。 问题在于，以前在旧版本中工作的样式不再适用。

**// setup of navigator**
const Stack = createStackNavigator();

const Travel = () => {
  return (
    <Stack.Navigator initialRouteName="List">
      <Stack.Screen name="Article" component={Article} />
      <Stack.Screen
        name="List"
        component={List}
        options={{
          title: null,
        }}
      />
    </Stack.Navigator>
  );
};

**// screen in question - List**
const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  header: {
    backgroundColor: 'orange',
  },
});

export default class List extends React.Component {
  static navigationOptions = {
    header: (
      <View style={[styles.flex, styles.row, styles.header]}> **// styles won't get applied for some reason**
        <View>
          <Text>Search for a place</Text>
          <Text>Destination</Text>
        </View>
        <View>
          <Text>Avatars</Text>
        </View>
      </View>
    ),
  };

  render() {
    return <Text>List</Text>;
  }
}

我不知道如何使这项工作看起来像这样：目标导航知道如何将此代码从教程中的 v3 版本更新到 react-navigation 的 v5 支持版本吗？

更新：我已经用这段代码更接近目标了：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View } from 'react-native';
import Article from '../screens/Article';
import { List } from '../screens/List';

const Stack = createStackNavigator();

const ListHead = () => {
  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: 'orange',
      }}
    >
      <View>
        <Text>Search for a place</Text>
        <Text>Destination</Text>
      </View>
      <View>
        <Text>Avatars</Text>
      </View>
    </View>
  );
};

const Travel = () => {
  return (
    <Stack.Navigator initialRouteName="List">
      <Stack.Screen name="Article" component={Article} />
      <Stack.Screen
        name="List"
        component={List}
        options={{
          headerTitle: () => <ListHead />,
        }}
      />
    </Stack.Navigator>
  );
};

export default Travel;

但是，我无法像目标照片那样将它们正确隔开，并且它们不会占据整个宽度。

Answer 1

在 react-navigation v5 中，您可以像这样使用headerLeft和headerRight进行自定义导航 header。 您还可以根据需要指定样式。

这是代码示例

export default class List extends React.Component {
  static navigationOptions = {
    headerLeft: () => (
      <View>
        <Text>Search for a place</Text>
        <Text>Destination</Text>
      </View>
    ),
    headerRight: () => (
      <View>
        <Text>Avatars</Text>
      </View>
    ),
    // you can specify your styles here also
    headerStyle: {},
    headerRightContainerStyle: {},
    headerLeftContainerStyle: {},
  };

  render() {
    return <Text>List</Text>;
  }
}

我希望这会对你有所帮助。！