android上左按钮和标题之间的反应导航空间

Bha*_*ani 4 android reactjs react-native react-navigation

我正在使用 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>
            )
        };
    };
}
Run Code Online (Sandbox Code Playgroud)

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

Joh*_*ohn 11

要删除后退按钮和标题之间的空间,您可以使用:

headerTitleContainerStyle: {
  left: 0,
},
Run Code Online (Sandbox Code Playgroud)

  • 我使用的是导航库的“5”版本,此代码将标题移动到屏幕的左边缘,而不是后退按钮的右边缘。是否可以相对于后退按钮定位标题? (4认同)

Bha*_*ani 0

经过一些更改后,它可以工作
更改上面代码中的 headerTitle

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