headerRight以毫秒显示并消失。 (react-navigation)

问题描述:

我正在使用Kitten UI进行导航(它只是包装)。 我可以渲染titleheaderLeft,但不显示headerRight。 (图片在这个问题的最底端附后)headerRight以毫秒显示并消失。 (react-navigation)

这是navBar.js(ThemedNavigationBar)

_renderRight(headerRight) { 
    let windowWidth = Dimensions.get('window').width; 
    const width = this.state.width 
     ? (windowWidth - this.state.width)/2 
     : undefined; 
    return headerRight && (
     <View style={[{width}, styles.right]}>{headerRight}</View> 
    ); 

    } 

render() { 
    let options = this.props.headerProps.getScreenDetails(this.props.headerProps.scene).options; 
    return (
     <View style={styles.layout}> 
     <View style={styles.container}> 
      {this._renderTitle(options.title, options.headerTitle)} 
      {this._renderLeft(options.headerLeft)} 
      {this._renderRight(options.headerRight)} 
     </View> 
     </View> 
    ) 
    } 

这是我的ChangePassword的navigationOption

static navigationOptions = ({ navigation }) => ({ 
    title: `Change Password`, 
    tabBarVisible: false, 
    headerRight: (<- RIGHT HERE 
     <Button 
     title='SAVE' 
     /> 
    ), 
    header: (headerProps) => { 
     return <ThemedNavigationBar navigation={navigation} headerProps={headerProps}/> 
    } 
}); 

<Button title='SAVE' />没有显示出来!

enter image description here

UPDATE

enter image description here

我得到当我设置从0到styles.right.right 30这到底是怎么回事这个怪异的导航?

left: { 
    position: 'absolute', 
    top: 0, 
    bottom: 0, 
    justifyContent: 'center' 
    }, 
    right: { 
    position: 'absolute', 
    right: 30, <- I set right from 30 to 0 and I could see the button (But it shows just the part of the botton. Can I do it better? 
    top: 0, 
    bottom: 0, 
    justifyContent: 'center' 
    }, 
    title: { 
    ...StyleSheet.absoluteFillObject, 
    justifyContent: 'center', 
    alignItems: 'center', 

设置宽度的确切值{width: 40}解决了我的问题!谢谢你们