headerRight 在一毫秒内显示并消失。（反应导航）

Question

我正在使用 Kitten UI 进行导航（它只是包装器）。我可以渲染 title 和 headerLeft 但 headerRight 没有出现。（图片附在这个问题的最底部）

这是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 的导航选项

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' /> 没有出现！

更新

当我将 styles.right.right 从 0 设置为 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',

Answer 1

设置宽度的精确值{width: 40}解决了我的问题！谢谢大家

headerRight 在一毫秒内显示并消失。（反应导航）

headerRight is shown in a millisecond and it disappear. (react-navigation)

reactjs

react-native

react-navigation

headerRight 在一毫秒内显示并消失。 （反应导航）

headerRight is shown in a millisecond and it disappear. (react-navigation)

reactjs

react-native

react-navigation

headerRight 在一毫秒内显示并消失。（反应导航）