代码:
var StackHomeOptions =({navigation})=>{ let {state} = navigation; console.log('Home navigation:'+navigation+state.params); const headerStyle = ETTHeaderStyles.headerStyle; const headerTitle = '北京'; const headerTitleStyle = ETTHeaderStyles.headerTitleStyle; const headerBackTitle = '返回'; const headerRight= (<Button onPress={() => navigation.navigate('MyScene',{ title:'个人中心' })} title={'详情'} />); const headerLeft =(<View/>); return {headerTitle,headerRight,headerTitleStyle,headerStyle,headerBackTitle,headerLeft} };
style:
var ETTHeaderStyles = StyleSheet.create( { headerStyle: { backgroundColor: '#1C1D21' }, headerTitleStyle: { flex:1, alignSelf:'center', fontSize: 20, color: '#ffffff', textAlign: 'center', fontSize: 20 }, bigTextPrompt: { width: 300, backgroundColor: 'gray', color: 'white', textAlign: 'center', fontSize: 20 }, });
问题 1。 因为是首页 所以 右侧有按钮 左侧没有按钮 所以会出现title 向左偏移问题 :
解决办法:在 StackHomeOptions 中 增加 const headerLeft =(<View/>);
问题2. 在 ETTHeaderStyles 中headerTitleStyle 设置了 alignSelf:'center', 安卓还是不能够居中
解决办法ETTHeaderStyles 中headerTitleStyle 设置
{
flex:1,
alignSelf:'center',
}