Question

我想将堆栈导航器选项对齐，标题与中心对齐，并将rightMargin与headerRight对齐。这是我的代码，它不起作用。我在这里做错了什么？

我尝试设置样式，但它没有采用样式。

  static navigationOptions = {
    title: "Share To Feed",
    // headerTitleStyle: {
    //   alignSelf: "center"
    // },
    headerLeft: (
      <Icon
        name={"close-box-outline"}
        size={40}
        onPress={() => {
          navigation.goBack();
        }}
      />
    ),
    headerRight: (
      // <TouchableOpacity>
        <View style={styles.image}>
          <Text>Post</Text>
        </View>
      // </TouchableOpacity>
    )
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  sharePostWrapper: {
    marginTop: 0,
    marginRight: 5,
    marginBottom: 5,
    marginLeft: 5,
    padding: 5,
    borderWidth: 1,
    borderColor: "gray"
  },
  image: {
    flex: 1,
    width: width - 20,
    height: 200
  },
  headerRight: {
    color: "red"
  }
});

export default SharePostScreen;

Answer 1

要自定义所有标题组件，您可以按以下方式定义导航布局。

// Use headerTitle since , it accepts both React.Element and React.Component

headerTitle: <Text>Post a Title</Text>, // Or a string
headerTitleStyle: {alignItems: 'center'}, // If it is an component
headerRight: <Text>Post</Text>,  // Or a string
headerLeft: (
      <Icon
        name={"close-box-outline"}
        size={40}
        onPress={() => {
          navigation.goBack();
        }}
      />
    ),
 // Give the styles to the parent wrapper here.
 headerStyle: {
       paddingRight: 15, // padding would be better
       paddingLeft: 15,
       height: 200
     }

代码

image: {
    flex: 1,
    width: width - 20,
    height: 200
  },

是错误的，因为图像占据了几乎所有的屏幕宽度，并且标题的其余部分未对齐。

另外需要注意的一点是navigationOptions

的层次结构

RouteConfigs ＆gt; 屏幕属性＆gt; 静态Nagivation配置

堆栈导航器导航选项对齐问题

1 个答案: