时间戳

首页 > 解决方案 > 导航选项 headerLeft、headerRight 和标题不起作用？

react-native - 导航选项 headerLeft、headerRight 和标题不起作用？

问题描述

我想要什么：在左侧放置一个可触摸的图标，一旦按下，该图标将导航到我的抽屉导航器，标题在中间，然后在右侧放置一个图标，一旦点击，该图标将具有未来用途

我尝试做的事情：我尝试将 navigationOptions 放在 MainScreen 下它仍然不起作用。

这是我在 AppNavigation.js 中的代码

    const primaryNav = createStackNavigator({
    LaunchScreen: { screen: LaunchScreen },
    MainScreen: {
    screen: MainScreen,
    },
    }, {
    // Default config for all screens
    headerMode: 'none',
    initialRouteName: 'MainScreen',
    navigationOptions: {
    headerStyle: styles.header,
    title: 'TY, Next',
       headerStyle:{
       backgroundColor: "Transparent",
       marginRight: 20,
       marginLeft: 20,
    },
    headerRight: (
       <TouchableOpacity>
        <Icon2 name="sc-telegram" color={Colors.red} size={30} /> 
       </TouchableOpacity>
    ),
    headerLeft: (
        <TouchableOpacity>
        <Icon name="bars" color={Colors.red} size={25}/>
         </TouchableOpacity>
    ),
 }
})

知道为什么我的代码没有运行吗？没有 Ty next 的标题，甚至我添加的 2 个图标也没有。我正在使用 igniteCLI 进行本机反应。

标签： react-nativereact-native-android

解决方案

我通过在我的屏幕上使用以下代码使其工作。

static navigationOptions = ({ navigation }) => {
    const {state} = navigation;
    const {} = state;
    return {
        headerStyle:{
            backgroundColor: "Transparent",
            marginRight: 20,
            marginLeft: 20,
        }, 
        headerLeft: (
            <TouchableOpacity>
                    <Icon name="bars" color={Colors.red} size={25}/>
            </TouchableOpacity>
        ),
        headerLeftStyle: styles.drawerIcon,
        headerRight: (
            <TouchableOpacity>
                    <Icon2 name="sc-telegram" color={Colors.red} size={30} />
            </TouchableOpacity>
        ),
        headerRightStyle: styles.planeIcon,
        headerTransparent:  true,
    };
}

推荐阅读