React Native导航栏系列（四）导航栏的配置、修改、自定义导航栏，全屏模式

导航栏的配置也是一项必学知识点。修改导航栏标题、背景色、样式、新增元素等。

一、设置标题
首先，导航栏的标题可通过options属性来设置。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

上面代码中，title的值即为HomeScreen页面的标题。

另外一种，通过参数设置标题：

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

在上一篇文章中，我们讲过了页面跳转传参。所以我们可以使用参数来设置跳转页面的标题： options={({ route }) => ({ title: route.params.name })} ，这一句是固定写法，只有后面的name是你的参数名。

二、修改标题

在上面两块代码中，你都可以看到我们是通过options来设置的标题，那么修改标题显而易见是通过setOptions来修改。这和setState类似。

<Button
  title="Update the title"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

三、修改导航栏样式

定制顶部导航栏的风格时，有三个关键性能用途：headerStyle，headerTintColor，和headerTitleStyle。

• headerStyle：样式对象，该对象将应用于View封装标题的。如果设置backgroundColor，那将是标题的颜色。
• headerTintColor：后退按钮和标题都使用此属性作为其颜色。在下面的示例中，我们将颜色设置为白色（#fff），因此后退按钮和标题标题将为白色。
• headerTitleStyle：如果要自定义标题的fontFamily，fontWeight以及其他Text样式属性，则可以使用此功能。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
    </Stack.Navigator>
  );
}

四、修改标题文本为图片或者按钮

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

标题为按钮或者图片取决于LogoTitle()函数返回的组件内容。这个示例返回Image，则标题位子将改为一个图片。

五、自定义导航栏及全屏模式

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}

function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

const MainStack = createStackNavigator();
const RootStack = createStackNavigator();

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

function RootStackScreen() {
  return (
    <RootStack.Navigator mode="modal" headerMode="none">
      <RootStack.Screen name="Main" component={MainStackScreen}/>
      <RootStack.Screen name="MyModal" component={ModalScreen} />
    </RootStack.Navigator>
  );
}

其中headerMode="none"属性可以隐藏导航栏从而使页面组件达到全屏模式。

全屏模式一般也会有相应的导航栏，可能是动态，也可能是更加好看的亦或者导航栏里包含其他组件。这些就需要自定义导航栏了，你可以单独一个文件中写导航栏组件，然后在需要的界面中进行引入就OK啦，很简单的内容。

有问题可以留言，一起讨论解决~