文档章节

react native 开发备忘

liuxiaofan
 liuxiaofan
发布于 11/03 20:45
字数 2410
阅读 13
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

问题参考

  • state变成 immutable类型后,赋值给state的值也要是immutable类型的,需要用 fromJS函数转化,不然的话赋值失败。

  • 字母转成数字:

    var str= 'A' ; str.charCodeAt()
    

    数字转换成字母:

    var num=65 ; String.fromCharCode(num);
    
  • android9 以后不能联网获取数据了,在AndroidManifest.xml配置文件的<application>标签中直接插入 android:usesCleartextTraffic="true"

解决方案参考

  • 使用webView 组件时,获得网页的高度的解决方案。使用此方案有一个缺点就是渲染延迟严重,优化建议就是给webview一个初始的高度,有了初始高度react渲染的才会快,不会产生白屏的问题。

  • 在react native中只有使用webview这个组件时有长按复制,解决这个问题方案为

    • let content = "<div style='user-select:none;-khtml-user-select:none;-webkit-user-select:none;'>" + this.props.content + "</div>";
      // 其实就是在外围加一个div,div的样式就是不能选中
      
  • axios 在使用时只会初始化一次,因此,想要动态的配置axios,必须 要动态的调用 axios.default.这样的配置

    • axios.defaults.baseURL = site;  //类似这样的配置
      
  • display:none 与 position:absolute 在同一个页面中不能同时存在

    这是react native的 bug,如果想实现 隐藏和显示的话,可以采用另外的方法,用设置组件高度为1来实现
    
  • 真机调试

    • 1、首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
      2、在设备上运行你的React Native应用。和打开其它App一样操作。
      3、你应该会看到一个“红屏”错误提示。这是正常的,下面的步骤会解决这个报错。
      4、摇晃设备,或者运行adb shell input keyevent 82,可以打开开发者菜单。
      5、点击进入Dev Settings。
      6、点击Debug server host for device。
      7、输入你电脑的IP地址和端口号(电脑网络IP:8081)。查看电脑IP这里就不用多说啦。
      8、回到开发者菜单然后选择Reload JS。
      

react navigation 备忘

  • react navigation中的操作影响到组件的方法 参考网址

    • 因为react navigation与 react 的组件谁先渲染不知道,所以,直接在react navigation中调用组件中的方法是行不通的。
    • react navigation与react组件之间有一个联通的对象,即 navigation,所以需要借助他。
    • 在组件中使用配置navigationOptions这个静态属性,通过navigation的params的属性承载信息,使用setParams函数传递。
  • react navigation 想在某些页面不显示tab navigation 参考网址

    • 思路就是把tab navigation和不想显示tab navigation的页面放在一个stack navigation 下

    • 此时如果页面上stack navigation的header有两个的话,在包含tab navigation的stack navigation下增加header:null,隐藏掉最上层的header,具体如下:

    • const InitialHomeStack = createStackNavigator(
        {
          BottomTabBar: {
            screen: TabScreen,
            navigationOptions: {
              header: null,
            }
          },
          WrongDetailScreen: WrongDetail,
          ChapterQuestionScreen: Question,
        },
        {
          initialRouteName: 'BottomTabBar',
        }
      );
      
  • navigate,push,replace

    • navigate 导航到一个屏幕,有一个限制就是不能多次导航到同一个屏幕
    • push 可以多次导航到同一个屏幕
    • replace 替换当前导航堆栈中的记录,比如a navigate 到 b ,b replace 到 c , c goback 就会到a,不会到b了
  • 判断页面是否在当前屏幕

    • 参考方法,根据这个可以判断当前是否在本页面,然后执行相应的操作。

ant design 备忘

ListView组件

  • 删除列表数据
<ListView
        onFetch={this.onFetch}
        keyExtractor={(item) =>
          `${item.id}`
        }
        renderItem={this.renderItem}
        ref={ref => this.listView = ref}  // 这个是让父组件能引用这个组件的函数
      >
renderItem = (item, index) // renderItem 方法可以传递index
let rowData = this.listView.ulv.getRows(); // 这里要特别注意,ant design 组件封装了react-native-ultimate-listview ,所以这个组件的函数都在  ulv 这里
rowData.splice(index, 1)
this.listView.ulv.updateDataSource(rowData); // 这里也是这个原因,要用ulv(好像用this.listview.updateDataSource(rowData)也行)

css 记录

box-sizing: border-box; // input内部 ,padding后,也不会增加

background-size: contain; // 背景图片和div一样大小

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

reactjs 记录

  • reducer 拆分,使用的是 redux的 combineReducer,注意事项就是拆分的是reducer,不是store,还是只有一个store,所以在引用state的时候,应该是state.something.somestate,但是在reducer的修改中,就没有中间的部分了。

  • immutable,Facebook开发的库,用来生成不可变的对象。用来确保state不变(因为reducer在处理action的时候,不能改变原来的state,要返回一个新的state,所以为了防止改变state,就用immutable处理)

  • redux-immutable ,生成state就是immutable对象。immutable对象不能使用下标来取数据,可以用map,immutable对象有一个方法 toJS(),这个对象可以把immutable对象转换成普通的JS对象。

  • state.set 是赋值一项, 多个值需要改变的话用 state.merge({key: value})

  • ref ,获取ref所在标签的真是dom节点。用法 ref={ (doms) => { this.doms = doms}} ,这样的话,this.doms 就代表了一个DOM节点,后面就可以引用这个DOM节点了

  • react-router-dom 是react路由

  • style-components 把js中的变量传递给css文件的语法: 1,在标签上写上传递的变量如 <lists imgurl={something} > 2,在css中 用特殊的语法 ${(props) => props.imgurl}

  • window.scrollTo(x, y) 滚动页面到x,y 位置,0,0 就是顶部,

  • window.addEventListener('scroll', func),监听scroll事件,document.documentElement.scrollTop 距离顶部的距离。

  • PureConponent ,比Component自带 shouldComponentUpdate ,但是要和immutable结合使用,否则的话会有坑。

  • this.props.match.param 动态路由获取参数,路由参数为 list/1

  • styledComponent 标签,如果直接用 ref 获取到的不是DOM,而是一个styled-component对象。想获取DOM,要用 innerRef

  • 异步组件:异步加载每个组件的JS文件。 react-loadable 这个组件。 使用这个组件时,原来写的接受路由参数就不能用了。需要做改变。改变代码: import { withRouter } from 'react-router-dom' connect()(withRouter())

  • 重要的一点,如果给子组件的props改变,子组件重新渲染,但是state不变。如果state也要重新改变的话,最佳的方案就是在组件上设置一个属性key。这种方式在绝大部分情况下效率是最高的,应为不必要比较差异了。

  • 父组件要调用子组件的方法,需要用到ref,

<ListView
        onFetch={this.onFetch}
        keyExtractor={(item) =>
          `${item.id}`
        }
        renderItem={this.renderItem}
        ref="listview"
      >
    //子组件加上一个ref, 调用时,直接使用  this.refs.listview
  • react 父组件更新子组件的Props的时候,如果直接在render函数中使用props,那么就直接更新,如果props要变为state的话,需要在componentWillReceiveProps函数中做转换

上线备忘

命令

  • npm run build

知识点

react native

style学习

父组件使用的属性

  • flexDirection: 确定子元素是横排列(row)还是竖着排列(column) reverse 意为反方向
  • flexWrap:子元素是否可以多行排列。默认一行。
  • justifyContent:横轴的排列方式。
  • alignItems
  • border 使用是分开使用的,直接用borderBottomColor之前,要设定borderBottomWidth,样式使用borderStyle
  • 悬浮按钮制作:上边用 ScrollView,悬浮部分用 View

调试

调试用 react-native-debugger

redux 永久存储

用redux-persist

显示网页用 react-native-webview

调用原生组件用 NativeModules)

JavaScript 备忘

  • 目前为止最完美的判断为空
export const isEmptyObject = (obj) => {
  for(var key in obj){
    return false
  };
  return true
};

export const isEmpty = (val) => {
  if (typeof(val) === 'object') {
    return isEmptyObject(val);
  } else {
    return val === false ||
           val === undefined ||
           val === '' ||
           val === 0 ||
           val === null
  }
}
  • JavaScript的变量赋值,如果是基本值的话,是正常的复制一份,如果是对象或者是数组类型的话,赋值就是引用,改变一个,会让两个值都改变
// 最简单的深拷贝
let list2 = JSON.parse(JSON.stringify(list));

支付备忘

  • 微信
    • 先去微信开放平台注册账号,申请APP开发,如果有微信支付的商户的账户,直接在微信支付的商户中绑定申请的APPID,无论有无商户账号都要在开放平台花300元认证。
    • 开发需要用到的几个参数为 APPID,在开放平台获取,商户ID,在商户后台,api_key,在商户后台->账户中心->API安全,中设置,证书也在这里获取。
  • 支付宝
    • 需要在支付宝开放平台申请APP开发,要的参数都在里面。
    • 需要注意的是服务器需要两个秘钥,一个是商户的私钥,一个是支付宝的公钥。商户的公钥在开放平台上填写。
    • 异步通知地址,实际是根据实时的提交地址来的,后台设置的只是参考,缺省的时候用。
  • 苹果内购
    • 内购服务的验证,收到的是一个json字符串
    • 服务器验证的时候,测试环境的验证网址和正式环境的验证环境的网址不一样,有开关 new AppleInAppPurchaseVerification($receiptData, $password, true) 第三个参数就是控制是否是测试环境

pushy 备忘

  • ios 端集成pushy后不能使用 虚拟机调试!会出现 no bundle 错误
  • 必须在应用退出前合适的任何时机,调用markSuccess,否则应用下一次启动的时候将会进行回滚操作。这个合适的时机就是componentWillMount
    componentWillMount() {
        if (isFirstTime) {
          markSuccess();
        }
      }
    

© 著作权归作者所有

上一篇: openstack
下一篇: mysql 数据库优化
liuxiaofan
粉丝 0
博文 95
码字总数 38736
作品 0
枣庄
后端工程师
私信 提问
[译] 用 React Hooks 和调试工具提升应用性能

原文地址:Increase your App’s performance with React hooks and the React Dev Tools 原文作者:Koen Poelhekke 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:...

👊Badd
05/26
0
0
Javascript 多线程和并行执行库--Hamsters.js

Hamsters.js 100% Vanilla Javascript 多线程和并行执行库 许可证:Artistic License 2.0 特性 多功能,通过跨多个线程来最大限度地提高性能。 自动数据聚合,自动将问题分解成较小的部分,...

匿名
2017/04/24
671
0
iOS开发者React Native学习路线

http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/ 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解...

卡奇匠
2016/12/13
119
0
React-Native学习资料分享

React Native 构建 Facebook F8 2016 App / React Native 开发指南 f8-app.liaohuqiu.net/ React-Native入门指南 github.com/vczero/reac… 30天学习React Native教程 github.com/fangwei71......

codeGoogle
2018/05/27
0
0
react native的一些基本概念

理解react native 一般做纯客户端Native开发的人,如果只是听说过react native,没有仔细了解的话,会本能的认为 react native是一个东西,是某种语言或某个开发模式。那咱们先从感性上认识r...

totogo2010
2016/06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

类比思想歪解Java线程

在操作系统的概念里,有内核态,用户态。其实,操作系统的最小执行单位是进程,而进程是分类型的,有两种类型,内核进程,用户进程。 内核进程由操作系统启动时创建,用户进程是由用户程序启...

萧默
48分钟前
2
0
Git推送错误“ [[远程拒绝]主机->主机(分支当前已签出)”)

昨天,我发布了一个有关如何将Git存储库从我的一台计算机克隆到另一台计算机的问题 , 如何从另一台计算机“ git clone”? 。 现在,我可以成功地将Git存储库从源(192.168.1.2)克隆到目标...

javail
57分钟前
4
0
Selenium 4.0 Alpha更新日志

早在2018年8月,整个测试自动化社区就发生了一件重大新闻:Selenium的创始成员Simon Stewart在班加罗尔Selenium会议上正式确认了Selenium 4的发布日期和一些重要更新。 Selenium 4.0 Alpha版...

八音弦
今天
7
0
2、编写程序求Sn=a+aa+aaa+…+aa…aa的值,其中a是1—9之间的一位数字,n表示 a的位数

//编写程序求Sn=a+aa+aaa+…+aa…aa的值,其中a是1-9之间的一位数字, //n表示 a的位数 #include<stdio.h> int main() { int a,n,i,Sn=0,Z=0; printf("please intput a:\n"); scanf("%d",&a......

201905021729吴建森
今天
5
0
Git中的HEAD是什么?

您会看到Git文档说出类似 分支必须在HEAD中完全合并。 但是到底什么是Git HEAD ? #1楼 了解正确答案的一种好方法是运行git reflog HEAD ,您可以获得HEAD所指向的所有位置的历史记录。 #2楼...

技术盛宴
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部