Question

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

我尝试做的事情：我试图将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的标题，甚至没有添加的2个图标。我使用igniteCLI的反应本地人。

Answer 1

使用Icon代替Icon2 如果您使用3x版本 defaultNavigationOptions 而不是navigationOptions

    "types": ["node"], // within compilerOptions

Answer 2

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

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

Answer 3

因为在 'navigationOptions' 中不推荐使用这些方法。 headerRight: <SomeElement /> 将在未来版本中删除。喜欢

headerRight: () => <SomeElement />

navigationOptions headerLeft，headerRight和标题不起作用？

3 个答案: