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)
经过一些更改后,它可以工作
更改上面代码中的 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)
| 归档时间: |
|
| 查看次数: |
3943 次 |
| 最近记录: |