react-native笔记

Posted on | Edited on

对ReactNative评价

  • 跨平台：目前React Native官方已经支持iOS、Android两个平台的移动设备，民间也有一些大牛在做macOS、tvOS，甚至UWP平台的适配。但由于不同平台特性不同，并不能一份代码在所有平台上直接运行，React Native的思想是「Learn once, write anywhere」，我们需要针对不同平台的特性写出不同的代码，尽量保持组件的高可复用性。

  • 性能：官方宣称性能堪比Native，实际使用中我们会发现几个问题，比如复杂视图渲染出View层级过多、ListView（等同于iOS上的UITableView）无重用机制、有些组件存在内存泄露。这就会导致在部分低端Android机型上的性能过差，复杂的、大型的应用会有明显性能问题。

  • 热更新：由于App Store应用商店发版迭代效率问题，热更新成为了iOS平台非常渴求的功能，可喜的是React Native的热更新能力非常好，通过将JavaScript代码部署到服务器中，运行过程中即可重新reload整个界面。

  • 学习成本：对于iOS开发者来讲，要了解相当数量的Web前端开发知识才可以进行开发，对于Web前端开发者来讲，对于原生性能调优则需要原生开发知识和经验，所以说学习成本略高。

  • 开发效率：Android和iOS平台可复用很多组件，仅部分代码需要各自平台分别维护，所以比开发两个平台原生应用效率要高得多。加上本身可动态渲染的能力，不用重新编译，Command⌘+R即可重新渲染界面，开发效率更是惊人地快。

React-Native 几大导航类型

  • createStackNavigator 提供APP屏幕之间切换的能力，它是以栈的形式还管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部。
    组件中可以使 navigation.navigate(’routerModuleName’, {param} ) 来切换转场

  • createDrawerNavigator 侧边导航抽屉路由

    navigation.openDrawer( ) 打开侧边栏
    navigation.toggleDrawer( ) 切换侧边栏
    navigation.closeDrawer( ) 关闭侧边栏

  • createMaterialTopTabNavigator 顶部导航

  • createBottomTabNavigator 底部导航

如何开发一个换肤的功能？

1 开发ThemeFactory 包含主题列表，主题样式
2 开发一个Dao，用来持久化应用的主题，包含存，取数据，浏览器可以存储在locationStorage里，react-native存储在AsyncStorage里。
3 开发换肤组件html+css，组件选取盘，比如颜色名称，
4 开发action，配置action类型，THEME_CHANGE(主题更改)，THEME_INIT(主题初始化)， SHOW_THEME_VIEW(皮肤组件显示)， 以及相对应的reducer.
5 用户前端点击换肤组件，触发选取组件事件，在事件里拿到主题的key, 调用Dao保存当前选取主题，解决用户离开应用再返回时候拿到配置
触发sTHEME_CHANGE action，reducer，把颜色key 保存到state里，用来做应用适时替换。
这样就完成了换肤功能。

redux/EventBut/DeviceEventEmitter不同点

redux 用来处理整个应用的共享数据，持久化数据，页面动作相关的数据

EventBus 可以用来处理多个页面之间的 简单的状态传递，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
EventBus.getInstance().addListener(EventTypes.favoriteChanged_trending, this.favoriteChangeListener = () => {
    this.isFavoriteChanged = true;
});

EventBus.getInstance().addListener(EventTypes.bottom_tab_select, this.bottomTabSelectListener = (data) => {
    if (data.to === 1 && this.isFavoriteChanged) {
        this.loadData(null, true);
    }
})

if (this.storeName === FLAG_STORAGE.flag_popular) {
    EventBus.getInstance().fireEvent(EventTypes.favorite_changed_popular);
} else {
    EventBus.getInstance().fireEvent(EventTypes.favoriteChanged_trending);
}

DeviceEventEmitter 用来解决单页面 组件之间的状态处理

1
2
3
4
5
6
this.timeSpanChangeListener = DeviceEventEmitter.addListener(EVENT_TYPE_TIME_SPAN_CHANGE, (timeSpan) => {
    this.timeSpan = timeSpan;
    this.loadData();
})

DeviceEventEmitter.emit(EVENT_TYPE_TIME_SPAN_CHANGE, tab);

项目结构

action

reducer

dispatch 一个action之后，进入reducer，处理完成之后统一返回给state

作为this.props的属性 返回给 this.props

1
2
3
4
5
6
7
8
9
10
const mapStateToProps = state => ({
    popular: state.popular
});

const mapDispatchToProps = dispatch =>({
    onLoadPopularData: (storeName, url) => dispatch(actions.onLoadPopularData(storeName,url))

})

const PopularTabPage = connect(mapStateToProps, mapDispatchToProps)(PopularTab)

这里的state.popular实际为 combineReducers里配置的popular名称以及总返回值。

AsyncStorage取代localStorage
import {AsyncStorage} from ‘react-native’

fetch取代 httpajaxrequest请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let url = `https://api.github.com/search/repositories?q=${this.searchKey}`;
console.log(url);
fetch(url)
    .then(response=>{
        return response.text() //格式为为text
    }).then(responseText=>{
        this.setState({
            showText:responseText
        })
    }).catch(e=>{
        this.setState({
            showText:e.toString()
        })
})

SafeAreaView 针对iPhone X设备齐刘海页面适配的组件
友盟 U-DPlus 互联网运营数据服务需要申请注册才能使用。集成ReactNative也是巨坑无比

====

react native debug模式加载100%之后空白页

  1. “GET /debuggerWorker.js HTTP/1.1”的问题是由于我chrome的问题无法自动打开http://localhost:8081/debugger-ui的页面导致的。
  2. Downloading JavaScript bundle 100%加载之后一直空白页尝试了多次一直都这样。

最后我通过使用官方的react native debugger工具成功debug了

禁用黄色调试信息

constructor(props){
super(props);
console.disableYellowBox = true;
}

reduxifyNavigator 已经废弃


Failed to build iOS project

info
error Failed to build iOS project. We ran “xcodebuild” command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening Github_RN_test.xcodeproj
BUILD FAILED

原因：xcode编译未通过，说明ios 有问题，可以打开ios项目在xcode里build一下查看具体出错原因。
一般出现的是模块安装，删除过程中，react-native link过后的模块 出错，没有删除或者未添加。

react-native-vector-icons 出错


reason: react-native-vector-icons 安装后没有执行link 简单执行react-native link 并不能自动执行所有模块的link操作。
react-native link react-native-vector-icons

react-native 模块安装后没有 react-native link

不能多重项目嵌套运行

error: No bundle URL present Make sure you’re running a packager server or have included a .jsbundle file

  • 多半是一个项目嵌套多个项目，多个package.json
  • 本地开了翻墙工具

-Go back to the old version of React Native

  • Run “npm install -g react-native-git-upgrade”
  • Run “react-native-git-upgrade”

Loading dependency graph, done. 死住

解决react-native 8081端口占用问题
lsof -i:8081
kill pid pid

开发目录权限问题

gitclone下来的项目 react-native run-ios 会出现Metro Bundle EACCES: permission denied

  1. cd 你的文件夹路径的上一级目录。
  2. sudo chmod -R 777 你的文件夹名。
  3. 输入密码。
    4.成功
    link

boost_1_63_0.tar.gz等错误

【RN踩坑】React-native 0.45版本以上出现 boost_1_63_0.tar.gz等错误

link