Question

使用react-navigation，发现headerLeft没有响应？而且没有headerLeft，headerRight

class Message extends React.Component {
    static navigationOptions = {
    tabBarLabel: '消息',
    headerTitle: () => (
    <View style={styles.headerWrapper}>
        <Text
             adjustsFontSizeToFit
            style={styles.headerText}>消息</Text>
    </View>
 ),
  tabBarIcon: ({ focused, tintColor }) => (
  <Image
      source={focused ? require('../images/clickmessage.png') : 
      require('../images/message.png')}
      style={{ width: 26, height: 26, tintColor: tintColor }}
  />
),
headerLeft: ({ focused, tinColor }) => {
    <Image
        source={focused ? require('../images/clickmessage.png') : 
        require('../images/message.png')}
        style={{ width: 26, height: 26, tintColor: tintColor }}
     />
 }
 };
render() {
    return (
        <View style={styles.container}>
        <MessageContent />
    </View>
 );
}

headerLeft和headerRight没有效果

Answer 1

您可以像这样使用左右标题：

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: (
            <View style={{flex: 1, alignSelf: 'center'}}>
                <AppFontLoader>
                    <Text style={{
                        color: '#fff',
                        alignSelf: 'center',
                        ...Platform.select({
                            ios: {
                                fontFamily: 'Some implemented font',
                            },
                            android: {
                                fontFamily: 'Another font for android',
                            }
                        }),
                    }}>Place you title here</Text>
                </AppFontLoader>
            </View>
        ),
        headerRight: (
            <TouchableOpacity onPress={() => navigation.navigate({routeName: 'PriceList'})}
                              style={{right: Platform.OS === 'ios' ? Dimensions.get("window").height < 667 ?  '10%' : '5%' : '25%', backgroundColor: 'transparent', paddingLeft: 15}}>
                <Image style={{width: 25, height: 25}} source={require('../../assets/icons/info2.png')}/>
            </TouchableOpacity>
        ),
        headerLeft: (
            <TouchableOpacity onPress={() => navigation.goBack(null)} style={{left: Dimensions.get("window").height < 667 ? '8%' : '3%', backgroundColor: 'red', width: '100%'}}>
                <Image style={{width: 30, height: 30}} source={require('../../assets/icons/back-icon-50x50.png')}/>
            </TouchableOpacity>
        ),
        headerStyle: {
            backgroundColor: '#14b6e4',
        },
        headerTintColor: '#fff',

    };
};

Answer 2

class Message extends React.Component {
    static navigationOptions = {
    tabBarLabel: '消息',
    headerTitle: () => (
        <View style={styles.headerWrapper}>
            <Text
                 adjustsFontSizeToFit
                style={styles.headerText}>消息</Text>
        </View>
   ),
   tabBarIcon: ({ focused, tintColor }) => (
      <Image
          source={focused ? require('../images/clickmessage.png') : 
          require('../images/message.png')}
          style={{ width: 26, height: 26, tintColor: tintColor }}
      />
    ),
    headerLeft: ({ focused, tinColor }) => {
        <Image
            source={focused ? require('../images/clickmessage.png') : 
            require('../images/message.png')}
            style={{ width: 26, height: 26, tintColor: tintColor }}
         />
    }
   };
   render() {
     return (
      <View style={styles.container}>
       <MessageContent />
      </View>
    );
 }

}

如何使用react-navigation的headerLeft和headerRight

2 个答案: