如何居中标题右图标按钮

Question

我使用react-navigation设置header和headerRight。 但是我的headerRight图标按钮无法位于右侧居中。

以下是我的代码

  Activate_qrscan: {
    screen: Activate_qrscan,
    navigationOptions: ({navigation}) => ({
      title: '123',
      headerRight: (
      <Button
        transparent
        onPress={ () => navigation.dispatch(navigateAction) }>
        <Icon
          name='close'
          style={ { color: 'white' } } />
      </Button>

      ),
      headerStyle: {
        backgroundColor: '#3b5998',
      },
      headerRightContainerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      },

      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'normal',
      },
    }),
  },

我添加了headerRightContainerStyle，但是它仍然无法正常工作！ 谁能帮我吗？

Answer 1

不要使用react-native-elements中的按钮，它会增加膨胀，并且甚至可能不需要某些时尚的外观，请移除headerRightContainerStyle并切换此代码的按钮，请注意，您需要来自react-native-elements的图标类。

  headerRight: (
        <View style={{flexDirection: "row",justifyContent: "flex-end",paddingRight:10,width: 120}}>
          <TouchableOpacity
            onPress={() => console.log('Hey im centered')}
            >
            <Icon type="font-awesome" name="cog" color="white" />
          </TouchableOpacity>
        </View>
      )