navigationOptions headerLeft, headerRight и title не работают?

Question

Что я хочу: поместите сенсорную иконку слева, которая будет перемещаться к моему навигатору ящика, и заголовок посередине, затем справа, иконку, которая имеет будущие цели после нажатия

Что я пробовалделаю: я пытался поместить навигационные опции под главный экран, он все еще не работает.

Это мой код в моем 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

Я заставил это работать, используя следующие коды на моем экране.

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 2

Используйте Icon вместо Icon2, если вы используете версию с 3x defaultNavigationOptions вместо navigationOptions

headerRight: (
   <TouchableOpacity>
  //-->I changed here  <Icon name="sc-telegram" color={Colors.red} size={30} /> 
   </TouchableOpacity>
),