реагировать-навигационное пространство между левой кнопкой и заголовком на android

Я использую реагирующую навигацию для перехода между экранами.
В 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>
            )
        };
    };
}

В приведенном выше коде ширина - это ширина экрана, и я использую -72, потому что ширина левой и правой кнопок.
Я также использую marginLeft в минусе, но он сокращает заголовок.


person Bhaumik Surani    schedule 09.08.2018    source источник


Ответы (2)


чтобы удалить пробел между кнопкой возврата и заголовком, вы можете использовать:

headerTitleContainerStyle: {
  left: 0,
},
person John    schedule 24.03.2020
comment
Работает на iOS - вы меня спасли! Спасибо - person Chris Sherriff; 16.12.2020
comment
Я использую версию 5 библиотеки навигации, и этот код перемещает заголовок к левому краю экрана, а не к правому краю кнопки возврата. Можно ли расположить заголовок относительно кнопки возврата? - person Kolyunya; 26.01.2021

После некоторых изменений он работает
Измените заголовок в приведенном выше коде

headerTitle:<Text numberOfLines={1} style={[MyStyle.appFontStyle1, {color: 'white', width: width- (Platform.OS==='ios'?72:118), fontSize: 20}]}>Title</Text>
person Bhaumik Surani    schedule 15.08.2018
comment
Я сделал что-то подобное, я знаю, что это не идеально, но вручную добавил несколько пробелов перед фактическим текстом headerTitle: <Text numberOfLines={1}>{" " + variableContainingTitleText}</Text> - person Zaheer; 21.02.2020