react-navigation 标题样式配置

最新推荐文章于 2025-06-10 12:01:49 发布

Wangdanting123

最新推荐文章于 2025-06-10 12:01:49 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Wangdanting123/article/details/89297728

本文介绍了一个React Native应用程序中订单页面的静态导航配置细节，包括标题设置、左侧和右侧触摸反馈图标的功能实现，以及针对Android和iOS设备的兼容性优化。

static navigationOptions = {
    title: '订单',
    headerLeft: (
      <TouchableOpacity onPress={abc}>
        <Image source={require('./images/head_60.png')} style={{ width: 30, height: 30 }} />
      </TouchableOpacity>
    ),
    headerRight: (
      <TouchableOpacity onPress={abc}>
        <Image source={require('./images/head_60.png')} style={{ width: 30, height: 30 }} />
      </TouchableOpacity>
    ),
    headerTitleStyle: {
      textAlign: 'center',
      flex: 1
    }, //兼容android手机标题文字居中
    headerLeftContainerStyle: {
      paddingLeft: 20
    },
    headerRightContainerStyle: {
      paddingRight: 20
    },
    headerStyle: {
      borderBottomWidth: 0,
      elevation: 0
    } //去掉下面的分割线 (兼容ios与android)
  };