android上左键和标题之间的反应导航空间答案

【问题标题】：react-navigation space between left button and title on androidandroid上左键和标题之间的反应导航空间
【发布时间】：2018-08-09 05:54:25
【问题描述】：

我正在使用 react-navigation 在屏幕之间导航。
在 ios 中它显示在中心并正常工作，但在 android 中它显示左侧和后退按钮和标题之间的空间。

我想删除 android 上的后退按钮和标题之间的空间。

我的代码

class Detail extends Component {
    .
    .
    .
    static navigationOptions = ({ navigation }) => {
        const {state} = navigation;
        return {
            headerTitle: "title",
            headerStyle: {
                borderBottomColor: 'transparent',
                borderBottomWidth: 0,
                backgroundColor: 'transparent',

                elevation: 0 ,
                shadowOpacity: 0,
                shadowColor: 'transparent',
                shadowRadius: 0,
                shadowOffset: {
                    width: 0,
                    height: 0
                }
            },
            headerTitleStyle: {
              color: 'white',
              width: width-72,
            },
            headerBackTitleStyle: {
              color: 'white',
            },
            headerTintColor: 'white',
            headerBackground: (
                <LinearGradient
                    colors={[MyConstants.colorNavbarStart, MyConstants.colorNavbarEnd]}
                    style={{ flex: 1 ,padding: 0}}
                    start={{x: 0, y: 0.5}}
                    end={{x: 1, y: 0.5}} />
            ),
            headerRight: (
            <TouchableOpacity>
              <View style={{padding: 8}}>
                <Image source={MyConstants.imgShareArrow} style={{height:20, width: 20}} />
              </View>
            </TouchableOpacity>
            ),
            headerLeft: (
            <TouchableOpacity onPress={ () => {navigation.pop()}}>
              <View style={{padding: 8}}>
                <Image source={MyConstants.imgBackArrow} style={MyStyle.backButton} />
              </View>
            </TouchableOpacity>
            )
        };
    };
}

在上面的代码中 width 是屏幕宽度，我使用 -72 因为左右按钮宽度。
我也在减号中使用marginLeft，但它削减了标题。

【问题讨论】：

标签： android reactjs react-native react-navigation

【解决方案1】：

要删除后退按钮和标题之间的空格，您可以使用：

headerTitleContainerStyle: {
  left: 0,
},

【讨论】：

适用于 iOS - 你救了我！谢谢
我正在使用导航库的5 版本，此代码将标题移动到屏幕的左边缘而不是后退按钮的右边缘。是否可以相对于后退按钮定位标题？
我也在使用react-navigation 版本 5，这将标题移动到屏幕的最左边缘。但它实际上做了一些事情。所以这是一个开始。我刚刚将其调整为left: 50，以便为后退按钮留出更多空间，现在它看起来很棒。您可能需要根据您的平台以及是否显示后退按钮来调整此设置。我希望有一种更简单的方法，但我找不到。谢谢@John！

【解决方案2】：

经过一些更改后它正在工作
更改上面代码中的 headerTitle

headerTitle:<Text numberOfLines={1} style={[MyStyle.appFontStyle1, {color: 'white', width: width- (Platform.OS==='ios'?72:118), fontSize: 20}]}>Title</Text>

【讨论】：

我做了类似的事情，我知道它并不完美，但在实际文本之前手动添加了几个空格headerTitle: <Text numberOfLines={1}>{" " + variableContainingTitleText}</Text>