反应导航如何为每个选项卡动态更改标题导航标题？

Posted 2021-04-18

我创建了3个屏幕，显示为createMaterialTopTabNavigator上的选项卡，它位于堆栈导航器中，我的问题是我不知道如何动态设置每个选项卡的标题标题。当前将标题设置为“欢迎”适用于所有选项卡。有什么帮助吗？ xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx

  import { LinearGradient } from 'expo';
    import { Icon } from "native-base";
    import React from 'react';
    import { StyleSheet, View } from 'react-native';
    import { createMaterialTopTabNavigator, DrawerActions } from 'react-navigation';
    import Home from '../TabNavigator/Home';
    import MyProfile from '../TabNavigator/MyProfile';
    import SelectAirtime from '../TabNavigator/SelectAirtime';

    export default class TabNavigator extends React.Component {
        static navigationOptions = ({ navigation, }) => {

    return {
        title: "Welcome",
        headerLeft: (
            <View style={{ padding: 10, }}>
                <Icon style={{ color: '#fff', fontSize: 24 }} name='menu' type="MaterialCommunityIcons"
                    onPress={() => navigation.dispatch(DrawerActions.openDrawer())} />
            </View>
        ),
        headerBackground: (
            <LinearGradient
                colors={['#2acc55', '#10356c']}
                style={{ flex: 1 }}
                start={[0, 0]}
                end={[1, 0]}
            />
        ),
        headerTitleStyle: { color: '#fff' },
    }
}

        render() {
            return (
                <HomeScreenTabNavigator></HomeScreenTabNavigator>
            );
        }
    }

    const HomeScreenTabNavigator = createMaterialTopTabNavigator({
        Home: {
            screen: Home, navigationOptions: {
                tabBarIcon: ({ tintColor }) => (<Icon style={{ color: 'white', fontSize: 24 }} name='home' type="MaterialCommunityIcons" />),
            }
        },
        "Buy AirTime": {
            screen: SelectAirtime, navigationOptions: {
                tabBarIcon: ({ tintColor }) => (<Icon style={{ color: 'white', fontSize: 24 }} name='cards-outline' type="MaterialCommunityIcons" />),

            }
        },
        "Account": {
            screen: MyProfile, navigationOptions: {
                tabBarIcon: ({ tintColor }) => (<Icon style={{ color: 'white', fontSize: 24 }} name='user' type="EvilIcons" />),

            }
        },
    },
        {
            initialRouteName: 'Home',
            tabBarPosition: 'bottom',
            tabBarOptions: {
                activeTintColor: 'white',
                inactiveTintColor: '#f2f2f2',
                labelStyle: {
                    fontSize: 9,
                },
                tabStyle: {
                    height: 60,
                },
                style: {
                    backgroundColor: '#1e3c72',
                    borderBottomColor: '#1e3c72',
                },
                indicatorStyle: {
                    height: 0,
                },
                showIcon: true,

            }
        }
    )

答案

定义TabNavigator：

 import { LinearGradient } from 'expo';
 import { Icon } from "native-base";
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { createMaterialTopTabNavigator, DrawerActions } from 'react-navigation';
 import Home from '../TabNavigator/Home';
 import MyProfile from '../TabNavigator/MyProfile';
 import SelectAirtime from '../TabNavigator/SelectAirtime';

 const HomeScreenTabNavigator = createMaterialTopTabNavigator({
     Home: {
         screen: Home,
         navigationOptions: {
             tabBarIcon: ({ tintColor, homeTitle }) => ( < Icon style = { { color: 'white', fontSize: 24 } } name = 'home'
                 type = "MaterialCommunityIcons" / > ),
             tabBarLabel: homeTitle,
         }
     },
     "Buy AirTime": {
         screen: SelectAirtime,
         navigationOptions: {
             tabBarIcon: ({ tintColor, selectAirtimeTitle }) => ( < Icon style = { { color: 'white', fontSize: 24 } } name = 'cards-outline'
                 type = "MaterialCommunityIcons" / > ),
             tabBarLabel: selectAirtimeTitle,

         }
     },
     "Account": {
         screen: MyProfile,
         navigationOptions: {
             tabBarIcon: ({ tintColor, myProfileTitle }) => ( < Icon style = { { color: 'white', fontSize: 24 } } name = 'user'
                 type = "EvilIcons" / > ),
             tabBarLabel: myProfileTitle,

         }
     },
 }, {
     initialRouteName: 'Home',
     tabBarPosition: 'bottom',
     tabBarOptions: {
         activeTintColor: 'white',
         inactiveTintColor: '#f2f2f2',
         labelStyle: {
             fontSize: 9,
         },
         tabStyle: {
             height: 60,
         },
         style: {
             backgroundColor: '#1e3c72',
             borderBottomColor: '#1e3c72',
         },
         indicatorStyle: {
             height: 0,
         },
         showIcon: true,

     }
 })
 export default HomeScreenTabNavigator;

用它：

 <HomeScreenTabNavigator  
  screenProps={{
    homeTitle: 'This home title',
    selectAirtimeTitle: 'This airtime title',
    myProfileTitle: 'This profile title',      
  }}
/>

希望对你有用！