rn 通过导航组件修改顶部导航栏信息

柔情只为你懂 2021-07-24 20:23 852阅读 0赞

方式一:将选项配置变成函数,根据传递的参数动态改变标题
          <Stack.Screen
            name="xx"
            component={x}
            options={({ route }) => ({ title: route.params.name })}
          />
    
    方式二:通过navigate更改路由组件信息，可以在生命周期函数中,拿到传递给本路由的参数,动态设置标题栏信息
        onPress={() => this.porps.navigation.setOptions({ title: 'Updated!' })}
        根据传递参数来设置
        this.props.navigation.setOptions({title:this.props.route.params.tit})
    
    (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"                    
                  />
                ),
                
              }}
            />

更多导航栏配置信息:  
[顶部导航配置][Link 1]

[Link 1]: https://reactnavigation.org/docs/stack-navigator#navigationoptions-used-by-stacknavigator