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