Question

我一直在尝试将文本置于StackNavigation标头中心，但我没有使用过任何已成功移动标题的内容。我不确定我是否只是使用错误的CSS来解决它。

class CryptoInfo extends React.Component {
static navigationOptions = ({ navigation, navigationOptions }) => {
  const { params } = navigation.state;

  return {
    title: params ? params.otherParam : 'Cryptopedia',
    /* These values are used instead of the shared configuration! */
    headerStyle: {
      backgroundColor: navigationOptions.headerStyle.backgroundColor,
      textAlign: 'center',
  alignSelf: 'center',
    },
    headerTintColor: navigationOptions.headerTintColor,
  };
};

render() {
  /* 2. Read the params from the navigation state */
  const { params } = this.props.navigation.state;
  const itemId = params ? params.itemId : null;
  const otherParam = params ? params.otherParam : null;

  return (
    <View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'flex-start', backgroundColor: '#68BFAC' }}>
      <ETHCard/>

    </View>

  );
}

}

我最初没有使用textAlign或alignSelf，但没有任何运气。我已经读过headerStyleTitle是另一种方法，但也没有运气。谢谢你的帮助！

P.S - 我在下面尝试了headerText：

return {
    title: params ? params.otherParam : 'Cryptopedia',
    /* These values are used instead of the shared configuration! */
    headerTitleStyle: {
      backgroundColor: navigationOptions.headerStyle.backgroundColor,
    },
    headerTintColor: navigationOptions.headerTintColor,
    headerText: {
      textAlign: 'center',
      alignSelf: 'center',
    },
  };
};

仍然没有效果：（

Answer 1

您可以根据需要创建新的标题组件和设计，就像单独的组件或屏幕一样。设置它的高度大约100或任何你喜欢的

const HeaderComponent = () => {
  return (
    // Your heade 
  );
}

static navigationOptions = ({ navigation, navigationOptions }) => {
  const { params } = navigation.state;

  return {
    header: <HeaderComponent />
  }
};

React Native StackNavigation无法中心标题

1 个答案: