設(shè)置header title

Screen 組件接受options 屬性，它要么是一個(gè)對(duì)象，要么是一個(gè)返回對(duì)象的函數(shù)，該對(duì)象包含各種配置選項(xiàng)。我們用于標(biāo)題標(biāo)題的是title，如下例所示。

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

在title中使用params

為了在標(biāo)題中使用參數(shù)，我們需要為屏幕設(shè)置一個(gè)返回配置對(duì)象的函數(shù)。

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>
  );
}

使用setoptions更新options

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

調(diào)整header樣式

• headerStyle: header的顏色
• headerTintColor: 后退按鈕和標(biāo)題都使用這個(gè)屬性作為它們的顏色
• headerTitleStyle: 如果我們想自定義標(biāo)題的fontFamily, fontWeight和其他文本樣式屬性，我們可以使用這個(gè)來(lái)實(shí)現(xiàn)

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>
  );
}

圖片.png

跨屏幕共享通用選項(xiàng)

如果希望在多個(gè)屏幕上以類似的方式配置頭部信息，可以這樣寫

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

用自定義組件代替標(biāo)題

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>
  );
}