rn_test

rn_test

说明

从项目开始启动（2018-07-02）到项目进入测试（2018-08-20）
从我基本没用过react，到直接上手react-native
其实从内心我是又爱又怕，爱是我确实很早就像下手除Vue以外的框架，多接触和学习一些不一样的思想；怕是前端就我一个，一切坑都由自己来抗；可想而知，内外压力一定会很大
过程就是日复一日的研究在研究，不停地问问题，然后在研究；开发rn很像开发小程序，更多时候还是利用rn提供的组件，再加上一些js技巧
结果：自己对社区的利用更加的顺手，面对难题不在过分畏惧而是不断深入思考，直至解决
心理：其实直面难题并不难，难的是自己看到了难题背后还有无数个难题，这时候自己就不想面对了；后来知道与其逃避，不如遇到一个干掉一个，不然攻城狮不是白叫了
下面是自己在实际中从开始到结束总结的一些东西，后续随着进展还会更新

简介

项目总结代码地址
记录开发react-native中各种有意思的事情
最新探索，用来进行各种尝试的空间
完成的探索，记录所有已经完成的模块、功能和效果
中转站，暂时无用

安装

全局脚手架

npm i -g react-native-cli

安装基础项目

react-native init <项目名称>

运行

优化后的运行

ios：npm run ios
android：npm run android
ios and android：npm run s

原始启动

ios：react-native run-ios
android：react-native run-android

资源

未探索的资源

365个库中寻找77个

新增页面需要在三个地方进行操作

data里面的complete.js中添加数据，方便在完成的探索中出现
navigators中的AppStackNavigators.js里面进行引入=>注册，使得路由正常
pages里面添加页面

优化package.json使开发更加方便

在scripts中添加，如下内容：

"ios":"react-native run-ios",
"android":"react-native run-android",
"s":"npm run ios && npm run android",

flex布局常用属性

防止在flex中出现，固定元素被挤压的问题，使用flex:1进行优化

display: 'flex';
flexDirection: row | row-reverse | column | column-reverse;
flexWrap: nowrap | wrap | wrap-reverse;
flexFlow: <flex-direction> || <flex-wrap>;
justifyContent: flex-start | flex-end | center | space-between | space-around;
alignItems: flex-start | flex-end | center | baseline | stretch;
alignContent: flex-start | flex-end | center | space-between | space-around | stretch;

order: <integer>;
flexGrow: <number>; /* default 0 */
flexShrink: <number>; /* default 1 */
flexBasis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
alignSelf: auto | flex-start | flex-end | center | baseline | stretch;

图片

图片使用

<Image source={require('./my-icon.png')} />

命名规则

icon_test.png
icon_test@2x.png
icon_test@3x.png

链接原生库

第一步

安装带原生依赖的库

npm install <某个带有原生依赖的库> --save

第二步

运行以下命令，它会根据package.json文件中的dependencies和devDependencies记录来链接所有需要链接的库

react-native link

开发技巧

启动hot或者debug的时候，切记不要同时启动ios and android，两者会发生冲突，导致出现程序崩溃，从而影响开发
最好的方式是，启动一个hot或debug，这样可以良好的进行开发；另一个手动足够了

处理触摸事件

使用"Touchable"开头的一系列组件
通过onPress属性接受一个点击事件的处理函数

两种方式绑定事件，并处理点击范围
推荐第二种，方便传递数据

_onPressButton=((item)=>{
  alert(1)
  console.log(item);
})
render() {
  return (
    <View>
      <TouchableHighlight onPress={this._onPressButton}>
        <View style={[S.btn,{backgroundColor:`${this.state.bg}`}]}>
          <Text style={S.btnText}>{this.state.bg}</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight onPress={()=>{
        this._onPressButton(this.state.bg)
      }}>
        <View style={[S.btn,{backgroundColor:`${this.state.bg}`}]}>
          <Text style={S.btnText}>{this.state.bg}</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}

解决版本冲突问题

js版本和rn版本出现冲突

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
清除Watchman：watchman watch-del-all
清除rn缓存：react-native start --reset-cache

解决路由失效问题

createTabNavigator要在createStackNavigator里面进行注册，才能够使用createStackNavigator具有的方法，这个是我第二次配置的时候掉进的一个坑

this.props.navigation属性详细说明

在createTabNavigator里面没有push、replace等方法
在createStackNavigator中存在push、replace等方法

AsyncStorage保存报错

JSON value '<null>' of type NSNull

当保存值为undefined的时候，报错
防止这种问题发生最好在this.state中保存初始值为空，必要时可以提醒用户

react-native支持的style props

查看最新版属性支持情况，最简单的直接在页面使用错误的属性，然后查看报错信息😂

Valid style props: [
  "alignContent",
  "alignItems",
  "alignSelf",
  "aspectRatio",
  "backfaceVisibility",
  "backgroundColor",
  "borderBottomColor",
  "borderBottomEndRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStartRadius",
  "borderBottomWidth",
  "borderColor",
  "borderEndColor",
  "borderEndWidth",
  "borderLeftColor",
  "borderLeftWidth",
  "borderRadius",
  "borderRightColor",
  "borderRightWidth",
  "borderStartColor",
  "borderStartWidth",
  "borderStyle",
  "borderTopColor",
  "borderTopEndRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStartRadius",
  "borderTopWidth",
  "borderWidth",
  "bottom",
  "color",
  "decomposedMatrix",
  "direction",
  "display",
  "elevation",
  "end",
  "flex",
  "flexBasis",
  "flexDirection",
  "flexGrow",
  "flexShrink",
  "flexWrap",
  "fontFamily",
  "fontSize",
  "fontStyle",
  "fontVariant",
  "fontWeight",
  "height",
  "includeFontPadding",
  "justifyContent",
  "left",
  "letterSpacing",
  "lineHeight",
  "margin",
  "marginBottom",
  "marginEnd",
  "marginHorizontal",
  "marginLeft",
  "marginRight",
  "marginStart",
  "marginTop",
  "marginVertical",
  "maxHeight",
  "maxWidth",
  "minHeight",
  "minWidth",
  "opacity",
  "overflow",
  "overlayColor",
  "padding",
  "paddingBottom",
  "paddingEnd",
  "paddingHorizontal",
  "paddingLeft",
  "paddingRight",
  "paddingStart",
  "paddingTop",
  "paddingVertical",
  "position",
  "resizeMode",
  "right",
  "rotation",
  "scaleX",
  "scaleY",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "start",
  "textAlign",
  "textAlignVertical",
  "textDecorationColor",
  "textDecorationLine",
  "textDecorationStyle",
  "textShadowColor",
  "textShadowOffset",
  "textShadowRadius",
  "textTransform",
  "tintColor",
  "top",
  "transform",
  "transformMatrix",
  "translateX",
  "translateY",
  "width",
  "writingDirection",
  "zIndex"
]

StatusBar解决android状态栏问题

设置StatusBar

<StatusBar
     backgroundColor="transparent"
     translucent
   />

设置顶部模块的样式

注：padding值需要+高度值=>height最终值

height: 50,
paddingTop: 10,

Platform区分ios and android平台

三种方法实现跨平台：

Platform.OS
使用Platform的select方法
使用不能组件名：ios使用header.ios.js；android使用header.android.js

const instructions = Platform.select({
  ios: 'ios',
  android: 'android',
});

请求fetch封装

HttpUtils.js

引入

import HttpUtils from '../../HttpUtils';

使用

在全局global.data.domain保存请求域名
请求需要header传递token的使用,global.data.token

HttpUtils.post(`${apiConfig}`, {
        platform: 'ios'
    },global.data.token)
    .then(rtn => {
        global.data.config = rtn;
        // console.log(`配置=>( ${JSON.stringify(rtn)} )`);
    })
    .catch(err => {
        console.log('error', err)
    })

请求环境+请求地址定义

请求环境

在addr.js中env变量定义

请求地址

在addr.js中addrList统一管理所有请求地址

使用

import addrList from '../../addr';
const {apiConfig}=addrList;

`react-native-scrollable-tab-view`

解决逗号影响的报错问题：在路径~/node_modules/react-native-scrollable-tab-viewSceneComponent.js下删除即可

react-native初始化报错，导致无法初始化

重新设置一下地址

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

动态切换状态

采用对象的形式来操作，这样可以使用state里面的参数，来动态切换
解决了直接应用的报错问题，以后遇到同样的问题要及时想到对象方式

声明周期-初始渲染 and 检测`goBack()`

为了保证页面的数据实时性，最好在初始的时候进行请求

componentDidMount(){}

检测`goBack()`

需要重新加载app

第一步

在删除组件的时候，定义goBack事件

componentWillUnmount(){
  DeviceEventEmitter.emit('goBack', 'goBack刷新返回页面数据');
}

第二步

在初始渲染中监听，goBack自定义事件

componentDidMount(){
  // 接收
  this.deEmitter = DeviceEventEmitter.addListener('goBack', (a) => {
    this.loadData();
  });
}

安卓打包

第一步：生成Android签名证书

第二步：设置gradle变量

将你的签名证书copy到android/app目录下
编辑~/.gradle/gradle.properties或../android/gradle.properties(一个是全局gradle.properties，一个是项目中的gradle.properties，大家可以根据需要进行修改) ，加入如下代码：

MYAPP_RELEASE_STORE_FILE=ch09-keystore.jks
MYAPP_RELEASE_KEY_ALIAS=ch09-keystore
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456

第三步：在gradle配置文件中添加签名配置

编辑android/app/build.gradle文件添加如下代码：

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

第四步：签名打包APK

terminal进入项目下的android目录，运行如下代码：

./gradlew assembleRelease

签名打包成功后你会在android/app/build/outputs/apk/目录下看到签名成功后的app-release.apk文件。
提示：如果你需要对apk进行混淆打包编辑android/app/build.gradle：

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = true

错误处理

fetch(apiLogin, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',//通过头指定，获取的数据类型是JSON
      'Content-Type': 'application/json',
      'Authorization':global.data.token,
    },
    body: JSON.stringify({
      // 请求参数
    })
  })
  .then(result => {
    const {status,statusText} = result;
    if(status>=200&&status<300||status==304){
      // 成功
      const promise = result.json()
      promise.then(rtn=>{
        // 成功
      })
    }else if(status==403){
      // 跳转登录
      this.props.navigation.replace('login');
    }else{
      // 提醒 statusText
      this.refs.toast.show(statusText);
    }
  })
  .catch(error => {
    if(Object.prototype.toString.call(error) === '[object Object]'){
        this.refs.toast.show(JSON.stringify(error))
    }else{
        this.refs.toast.show(error)
    }
  })

app的logo and name

android

LOGO

将logo分别放到android/app/src/main/res下的四个文件夹中,命名为ic_launcher.png
没有对应上的文件夹放一张1024*1024或者512*512的即可

app名称

在android/app/src/main/res/values/strings.xml中更改

IOS

LOGO

xcode> 根目录 >Images.xcassets 将生成的图标拖入对应的位置

app名称

xcode> 根目录 >Info.plist 中修改 Bundlename 和 General> DIsplay Name

rn_test

说明

简介

安装

运行

资源

未探索的资源

新增页面需要在三个地方进行操作

优化package.json使开发更加方便

flex布局常用属性

图片

链接原生库

开发技巧

处理触摸事件

解决版本冲突问题

解决路由失效问题

AsyncStorage保存报错

react-native支持的style props

StatusBar解决android状态栏问题

Platform区分ios and android平台

请求fetch封装

请求环境+请求地址定义

react-native-scrollable-tab-view

react-native初始化报错，导致无法初始化

动态切换状态

声明周期-初始渲染 and 检测goBack()

检测goBack()

安卓打包

第一步：生成Android签名证书

第二步：设置gradle变量

第三步：在gradle配置文件中添加签名配置

第四步：签名打包APK

错误处理

app的logo and name

android

IOS

`react-native-scrollable-tab-view`

声明周期-初始渲染 and 检测`goBack()`

检测`goBack()`