rn 通过导航组件设置顶部导航栏信息

(1)将选项配置变成函数,根据传递的参数动态改变标题
      <Stack.Screen
        name="xx"
        component={x}
        options={({ route }) => ({ title: route.params.name })}
      />

(2)通过navigate更改路由组件信息
    onPress={() => navigation.setOptions({ title: 'Updated!' })}

(3)设置路由导航栏样式
    <Stack.Screen
        name="xx"
        component={xx}
        options={{

          title:'x',
          headerStyle: {设置整个页眉样式},
          headerTintColor: '后退和标题颜色',
          headerTitleStyle: {标题字体样式},
          headerBackImage:require('xx')/uri,

        }}
      />

(4)设置路由导航栏通用样式screenOptions
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      ...
    </Stack.Navigator>

(5)设置标题为图片

headerTitle接收一个组件作为标题,所以该组件必须返回<Image/>
 <Stack.Screen name='x'component={x}   options={{ headerTitle: ()=> <Header  /> }}/>

 function Header() {
    return (
      <Image
        style={{ width: 50, height: 50 }}
        source={require('./img/钢铁侠4.jpg')}
      />
    );
  }
  
(6)设置导航栏右侧按钮,options内的this改变了指向

     <Stack.Screen
          name="A"
          component={A}
          options={{
          
            headerRight: () => (
              <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="blue"                    
              />
            ),
            
          }}
        />

更多导航栏配置信息:
顶部导航配置