如何使用react-navigation的headerLeft和headerRight

2023-12-25

使用react-navigation,发现headerLeft没有响应?并且没有 headerLeft, headerRight

class Message extends React.Component {
    static navigationOptions = {
    tabBarLabel: '消息',
    headerTitle: () => (
    <View style={styles.headerWrapper}>
        <Text
             adjustsFontSizeToFit
            style={styles.headerText}>消息</Text>
    </View>
 ),
  tabBarIcon: ({ focused, tintColor }) => (
  <Image
      source={focused ? require('../images/clickmessage.png') : 
      require('../images/message.png')}
      style={{ width: 26, height: 26, tintColor: tintColor }}
  />
),
headerLeft: ({ focused, tinColor }) => {
    <Image
        source={focused ? require('../images/clickmessage.png') : 
        require('../images/message.png')}
        style={{ width: 26, height: 26, tintColor: tintColor }}
     />
 }
 };
render() {
    return (
        <View style={styles.container}>
        <MessageContent />
    </View>
 );
}

headerLeft 和 headerRight 没有效果


您可以像这样使用 header left 和 right:

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: (
            <View style={{flex: 1, alignSelf: 'center'}}>
                <AppFontLoader>
                    <Text style={{
                        color: '#fff',
                        alignSelf: 'center',
                        ...Platform.select({
                            ios: {
                                fontFamily: 'Some implemented font',
                            },
                            android: {
                                fontFamily: 'Another font for android',
                            }
                        }),
                    }}>Place you title here</Text>
                </AppFontLoader>
            </View>
        ),
        headerRight: (
            <TouchableOpacity onPress={() => navigation.navigate({routeName: 'PriceList'})}
                              style={{right: Platform.OS === 'ios' ? Dimensions.get("window").height < 667 ?  '10%' : '5%' : '25%', backgroundColor: 'transparent', paddingLeft: 15}}>
                <Image style={{width: 25, height: 25}} source={require('../../assets/icons/info2.png')}/>
            </TouchableOpacity>
        ),
        headerLeft: (
            <TouchableOpacity onPress={() => navigation.goBack(null)} style={{left: Dimensions.get("window").height < 667 ? '8%' : '3%', backgroundColor: 'red', width: '100%'}}>
                <Image style={{width: 30, height: 30}} source={require('../../assets/icons/back-icon-50x50.png')}/>
            </TouchableOpacity>
        ),
        headerStyle: {
            backgroundColor: '#14b6e4',
        },
        headerTintColor: '#fff',

    };
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用react-navigation的headerLeft和headerRight 的相关文章

随机推荐

  • fork() 和 vfork() 有什么区别?

    有什么区别fork http pubs opengroup org onlinepubs 9699919799 functions fork html and vfork http man7 org linux man pages man2
  • 如何使用 python win32com 或 comtypes 中的 COM 访问 IRTDServer?

    环境 Windows 10 python 3 6 3 64 位 也尝试过 32 位 我是一名 Python 开发人员 几乎 第一次尝试使用 COM 但遇到了这个巨大的障碍 Problem 当我尝试使用在 dll 中实现的 IRTDServe
  • 如何在 SQL Server 事务中设置“SET XACT_ABORT ON”?

    我想设置SET XACT ABORT ON在带有事务的 SQL Server 2008R2 存储过程中 因此在创建脚本中执行此操作 SET ANSI NULLS ON GO SET QUOTED IDENTIFIER ON GO SET X
  • 使用 rvest 抓取时如何重用会话以避免重复登录?

    我开发了一些代码来抓取交通数据这个话题 https stackoverflow com questions 38687068 with rvest how to extract html contents from the object r
  • 当在 Chrome 的 Omnibox 上按下 Enter 时,Keyup 事件侦听器会触发

    在 Chrome 浏览器中 使用此代码片段时 document on keyup function alert Hey 每次我按下enter在网址栏中 例如 当我剪切并粘贴页面本身的网址时 事件侦听器会触发 为什么会发生这种情况 EDIT
  • 在 V8 中使用数组(性能问题)

    我尝试了下一个代码 它在 Google Chrome 和 Nodejs 中显示了类似的结果 var t new Array 200000 console time wtf for var i 0 i lt 200000 i t push M
  • 将您自己的 SQLite 数据库添加到 Android 应用程序

    我们如何将自己的 SQLite 数据库添加到 android 项目中 试试这个代码 public class DataBaseHelper extends SQLiteOpenHelper private Context mycontext
  • 更改页面 url 而不刷新页面

    这可能吗 问题是这样的 我使用此 URL 进行关键字搜索 搜索后 http localhost thi search keyword key http localhost thi search keyword key 然后我有一个使用 Aj
  • Eclipse e4 工具装饰条中的控件

    我想在装饰条中创建组合框 所以我开始添加一个文本框 我创建了 TrimBars gt WindowTrim gt Toolbar gt Tool Control 我还提到了 Class URI public class SearchTool
  • Android:如何跟踪软键盘是否打开?

    在我的应用程序中 设备软键盘覆盖了 EditTextView 因此用户无法看到他正在输入的内容 所以我想隐藏其他视图 比如我的例子中的按钮 以使 EditTextViews 可见 但相反做类似的事情 EditText onFocus hid
  • 如何发送 ASP.NET Web 服务的参数

    我有一个大学项目 我应该在其中实现一个使用 Web 服务的 java 驱动的网站 一些将创建为 servlet 另一些则应创建为 NET servlet 我创建了可以称为 loginservice username md5 的 java s
  • ember.js 和 bootstrap Accordion - 创建视图的“ember 方式”

    我的问题不是如何使引导手风琴工作 而是尝试确保我理解 余烬 的做事方式 我在这里创建了一个引导手风琴的工作示例 截至 2013 年 3 月 12 日 http jsfiddle net nrionfx s59fA http jsfiddle
  • 如何在ggplot2中使用coord_polar移动x轴标签

    我无法在下图中移动轴标签 现场数据 辅助数据等 以便它们都很大并且完全适合图表 整个代码如下 关于做什么的建议 Datasource lt c Field data Participatory data Remotely sensed da
  • Jetpack Compose 导航 - 底部导航多个返回堆栈 - 查看模型范围问题

    所以我有两个选项卡 选项卡 A 和选项卡 B 每个选项卡都有自己的后堆栈 我使用此中的代码实现了多个返回堆栈导航谷歌文档 https developer android com jetpack compose navigation val
  • 对 unicode 文件使用 getline 时出现问题

    更新 感谢 Potatoswatter 和 Jonathan Leffler 的评论 相当尴尬的是 我被调试器工具提示发现没有正确显示 wstring 的值 但它仍然不太适合我 我已经更新了问题以下 如果我有一个小的多字节文件 我想读入一个
  • 在 BlackBerry 上解析 XML 文件

    我想知道如何在 BlackBerry 上解析 XML 数据 我在某处读到 JSON 是解析 xml 数据的好方法 是否有使用 JSON 或任何其他机制解析 XML 数据的教程 在 Blackberry 中解析 XML Simple API
  • MVC 中模型的条件验证

    我有一个视图和模型 用于记录的编辑和插入页面 业务需求之一是某个字段在编辑时需要 但在新建时不需要 最初 在将此特定功能添加到待办事项中之前 我的模型如下 Required ErrorMessage Range 0 0 double dec
  • 检查值是否为数字

    我如何简单地检查返回值是否为类型int or uint是一个数字吗 Simple if myValue is Number fire end if UPDATE 请记住 如果 myValue属于类型int or uint then myVa
  • Netezza CSV 加载

    我们是 netezza 新手 目前正在尝试通过脚本将 CSV 文件导入 netezza 让它发挥作用的最佳方法是什么 理想情况下我们希望 1 创建我们想要的表结构 2 导入CSV并将CSV列名称映射到我们想要的结构 一次导入 此代码返回错误
  • 如何使用react-navigation的headerLeft和headerRight

    使用react navigation 发现headerLeft没有响应 并且没有 headerLeft headerRight class Message extends React Component static navigationO