1. cd 项目根目录

2. npm install

3. 完成之后,在根目录中会出现node_modules文件夹(和package.json同级目录).OK.接下来使用Xcode再次打开就好了.

2.如何导入第三方库.

1.cd 项目根目录

2.npm i 库名 --save

如: npm i react-native-tab-navigator --save      导入了react-native-tab-navigator这个库

3.获取屏幕的宽和高

使用Dimensions

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window'); 
 leftViewStyle:{
        width:width/4,
4.根据不同的平台设置不同的效果
使用Platform
先引入Platform:
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform
} from 'react-native';
    iconStyle:{
        width: Platform.OS === 'ios' ? 30 : 25,
        height:Platform.OS === 'ios' ? 30 : 25
　5.颜色值使用RGB三色值.　　
backgroundColor:'rgba(234,234,234,1.0)',
   6.ref的使用,可以获取上下文的组件.
<TextInput ref="tel" style={styles.telInputStyle} placeholder = {'📱:手机号'} keyboardType = {'number-pad'} />
7.使用react-native-tab-navigator时，二级界面怎么隐藏tabBar.　
     开发中,遇见个大坑,react native在push之后怎么隐藏下方的tabbar.　
　　这个问题真是个大坑,按照原生的开发经验,一般项目的架构模式都是:先以tabBar作为根,tabBar之下再放置navigationBar.但是React Native却相反.是先以navigationBar作为根,navigationBar之下再放置tabBar.这样的话就可以二级界面就会自动隐藏tabBar了.该坑填完~~
demo地址:https://github.com/pheromone/react-native-push-tabbar
8.Android去除TextInput下方的横线.
在TextInput中使用underlineColorAndroid = {'transparent'}该属性即可.
 8.Ignoring return value of function declared with warn_unused_result attribute报错:React Native 0.32以下版本Xcode8报错解决办法
只需在报错代码前加上  (void):
(void)SecRandomCopyBytes(kSecRandomDefault, keyBytes.length, keyBytes.mutableBytes);
(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);
　然后运行之后又会出现:
需要在报错的地方,替换代码:
-(void)setRefreshControl:(RCTRefreshControl *)refreshControl
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  
　　OK.该坑填完.
 9.react native 之去除Warning:In next release empty section headers will be rendered. In this release you can use 'enableEmptySection' flag to render empty section headers.
只需要在警告类的ListView里添加一条属性即可:
enableEmptySections={true}
10.mac显示隐藏文件
 终端运行下面的命令即可:
defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Finder
11.出现无法在Xcode中Add Files to <...>其他XXXXXXX.xcodeproj的情况.会出现XXXXXXX.xcodeproj是灰色.
这种情况一般都是先使用了link命令导致的,一般只需先行npm install XXXXXX --save.然后再Add Files to <...>其他XXXXXXX.xcodeproj就可以选中了,之后在link即可.顺序搞对就行了.
实在不行,直接手动拖进去就可以了,简单粗暴,脱了裤子就是干.没事强奸程序猿不犯法的.
12.破解WebStorm:
在该位置处理:
粘贴下面的上去即可:
http://jetbrains.tencent.click
如果失效的话可以在此重新换个新的粘贴: 激活获取
 13.listView去除黄色警告:in next release empty section headers will be rendered.in the release you can use 'enableEmptySections' flag to render tmpty section headers.
只需在其listView中添加以下属性即可:
enableEmptySections={true}  //去除警告
14.React-Native中禁用Navigator手势返回
1     configureScene(route, routeStack) {
2         // return Navigator.SceneConfigs.PushFromRight;
3         var conf = Navigator.SceneConfigs.HorizontalSwipeJump;
4         conf.gestures = null;
5         return conf;
15.React-Native中拨打电话
import {Linking} from 'react-native';
function callPhone(){
  return Linking.openURL('tel:10086')
16.[] __nw_connection_get_connected_socket_block_invoke XX Connection has no connected handler.还TM一秒来一次
 Edit Scheme...  ->  Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
36     componentDidMount=() =>{
37         setTimeout(this.showMeasure);  //需要在页面加载完毕之后对视图进行测量,所有需要setTimeout
38     }
39     showMeasure = () =>{
40         this.refs.myText.measure((x,y,width,height,px,py) =>
41             alert(x)
42         );
43     }
46 }
48 const styles = StyleSheet.create({
49     container: {
50         flex: 1,
51         justifyContent: 'center',
52         alignItems: 'center',
53         backgroundColor: '#F5FCFF',
54     },
55     welcome: {
56         fontSize: 20,
57         textAlign: 'center',
58         margin: 10,
59     },
60     instructions: {
61         textAlign: 'center',
62         color: '#333333',
63         marginBottom: 5,
64     },
65 });
 18.react native 定义一个全局变量:global
如:在A.js中定义个id为全局变量
global.id = '12345'
在B.js直接调用即可
alert(id)
 19.ECMAScript 6 学习文档
 http://es6.ruanyifeng.com/
 20.关于react-navigation的使用介绍及demo
使用介绍:  http://www.jianshu.com/p/2f575cc35780
demo: https://github.com/pheromone/navigationDemo 
 在使用react-navigation中遇到几个难点:
1.跳至相应路由(如返回首页功能).  http://www.jianshu.com/p/2f575cc35780
2.防止点击过快,跳界面两次.  https://github.com/react-community/react-navigation/pull/1348/files
3.static中使用this.  http://www.jianshu.com/p/2f575cc35780
   对于以上三个问题,现在可以不用修改源码也可以实现: https://github.com/pheromone/react-navigation-use
   防止多次点击可以采用该方案: https://blog.csdn.net/sinat_17775997/article/details/78853879
21.redux集合中文文档.mobx中文文档
redux-saga中文文档
Redux中文文档
Redux教程: 1 2 3
Redux Demo: 1 2
mobx中文文档
Mobx教程: 1 2
22.react-native init 指定版本
react-native init [项目名] --version="0.44.0"
23.黄屏.红屏警告处理 
http://reactnative.cn/docs/0.45/debugging.html
如关闭黄屏警告:   console.disableYellowBox = true;
24.android打包发生诸如 Could not list contents of 'XXX' Couldn't follow symbolic link.的错误.
参考:https://github.com/facebook/react-native/issues/11212
 我上面这条报错就直接删除node_modules/react-native/third-party这个文件夹.
25.android下,Image控件不支持gif的解决方案.
在android/app/build.gradle中的dependencies字段中添加：
compile 'com.facebook.fresco:animated-gif:0.13.0'
然后重新运行即可.
如果你出现Unfortunately,XXX has stopped.
compile 'com.facebook.fresco:fresco:1.5.0'
compile 'com.facebook.fresco:animated-gif:1.5.0'
26.使用谷歌浏览器调式,Windows快捷键是F12 Mac是option+command+i
27.把css导出作为公共css使用.使用import {StyleSheet} from 'react-native'导入样式组件,使用module.exports导出即可,
如,导出样式:
 * Created by shaotingzhou on 2017/10/25.
import React from 'react';
import {
    StyleSheet
} from 'react-native';
const myStyle = StyleSheet.create({
    welcome: {
        height:100,
        width:100,
        backgroundColor:'red'
module.exports = myStyle;
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import  Style from './style'
export default class App extends Component<{}> {
  render() {
    return (
    <View style={Style.welcome}>
    </View>
28.动画学习 :  https://github.com/dwqs/blog/issues/41
29.iOS 跑项目出现 Failed to load bundle (http://......) with error:(Could not connect to development server).
多半是因为 iOS对https的要求,直接在xcode里面的info.plist添加 ATS设置即可.
 29.出现Connection to localhost port 8081 [tcp/sunproxyadmin] succeeede.........
是因为8081端口被占用了.只需吧占用8081的应用退出或者kill即可.
查看端口:  lsof -i:8081
杀掉端口的占用: kill 8081
30. 在集成react-navigation和redux时 出现TypeError: undefined is not a function (near '...addListener...')错误.
 请集成该库:  react-navigation-redux-helpers
请参考react-navigation和redux集成demo: https://github.com/pheromone/redux_react-navigation_use
31.吃屎级神坑,在集成react-navigation和redux时 出现 安卓不显示tabBar图标情况.
在tabBarOptions中添加showIcon: true如:
tabBarOptions: {
    showIcon: true,
    },
}

请参考https://github.com/pheromone/redux_react-navigation_use
32. 




    
在集成react-navigation和redux时,出现tab1显示正常,其余不显示的情况.
把react-navigation的lazy置为false.
请参考https://github.com/pheromone/redux_react-navigation_use

33. iOS一切OK,但是就Android出现该问题:Connot add a child that doesnot have a YogaNode to a 
parent without a measure function!(Trying to add a 'ReactRaw TextShadowDode a a 'LayoutShadowNode'),
在Android上面,push的时候崩溃
这个问题差点搞死我和同事,我们百度+谷歌半天说是注释的问题,我们半信半疑的去了所有注释,果然没用.我怀疑redux的问题,
去除redux还是没有用,又怀疑是react-navigation的问题,去了还是一样........最后发现是在一个标签外面多写一个>,有次是在!前面多了一个!.
34.组件引用重复.
35.TypeError:undefined is not an object (evaluating 'section.data.length')
我这边出现这个错误是因为在json数据中的key错误,现阶段中,在使用SectionList时,在json中的key需要是data.
就是需要"data":[].这样的类型
 36.RN中长列表刷新机制遇到的史诗级bug:
RN中只要state一变,界面就改变.按理说把长列表中的数据源设置为state,只要state改变,界面也会改变.但是我遇到一个bug:我的数据源大小不会改变,只是其中的按钮点击type的数据会在true和false之间变化,但是不论我怎么改变按钮type的true和false.界面就是不变,甚至我减少数据也是不变,只有完全改变json界面才会再次渲染.
解决办法:
定义一个state,每次一点击需要修改界面,就重新赋值该state.
 // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
           data:[{'type':false,'data':[1,2]},{'type':true,'data':[3,4]}]  //数据源
           num:0  //只作为修改界面使用
 我通过在json串中加入点击type.保证点击效果的切换
//点击方法  
rightAction =() => {
    this.setState({
          data:[{'type':true,'data':[1,2]},{'type':true,'data':[3,4]}],
          num:this.state.num + 1 //点击一次加1,保证界面刷新 
 }) 
这样,界面就会修改了.
 37.数组视图的写法.
a.bing+push写法.
 // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            data:[{'key':'111111111'},{'key':'222222222'},{'key':'333333333'},{'key':'4444444'}]
    render() {
        return (
                {this.renderAry(this.state.data)}
            </View>
    renderAry =(e) =>{
        var ary = []
        for(var i = 0;i < e.length; i++){
            ary.push(
                <Text onPress={this.alertAction.bind(this,i)}>{e[i].key}</Text>
        return  ary
    alertAction = (i)=>{
        alert(i)
View Code
b.map写法.
   // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            data:[{'key':'111111111'},{'key':'222222222'},{'key':'333333333'},{'key':'4444444'}]
    render() {
        return (
                    this.state.data.map((item,index)=>
                        <Text onPress={()=>this.alertAction(index)}>{item.key}</Text>
            </View>
    alertAction = (i)=>{
        alert(i)
View Code
上面两种方法 视图 和 对应点击 都OK
38.react-navigation的自带的导航条无法隐藏问题.
我使用react-navigation ^2.0.4不管怎么样都无法隐藏导航栏.然后换为^1.0.0-beta.21就可以隐藏了.fuck.fuck.fuck.
39.Android出现:cannot add child that doesn,t have a YogaNode to a parent without measure function!......
我出现这个问题的原因是:
 图中箭头处未写组件..........这是个什么鬼.
40.Failed  to load bundle(http://localhost:8081/index.bundle?......)
我的原因是上一个项目的启动了,然后我接着启动了下一个项目,就这样了...............
41.webView加载本地html出现中文乱码:加上 baseUrl: '' 即可.如
 <View style={{marginTop:15}}>
                    <Text>{item.item.title}</Text>
                    <WebView
                        source={{html:'<h1>233</h1>', baseUrl: ''}}
                        style={{width:width,height:140}}
                </View>
 42.查看三方库的版本信息:
npm info XXXXX
 43.引入指定版本库:
npm i XXX@0.3.1 --save
44.cannot add a child that doesnt have a YogaNodeto a parent without a measure function!(Trying to add a 'RCTRaw .........')
 产生这个问题的原因挺多的,我说下我今天遇到的这种.在iOS中正常在Android中报错.
完整报错:
原因是我在标签中写三元运算符的时候,忘记添加{}包住逻辑代码.如:
 45.在使用react-native-axios时,在发送post请求+附带头信息时,报401错误.参数无误,headers无误.
是参数和headers顺序反了.应该先来参数再设置headers.
401错误:
 46.react native font family 'Material Icons'.
这个错误是 react-native-vector-icons 的报错.可是我也没有使用这个库啊!!!实在没办法只能
react-native link react-native-vector-icons 
一下.也许可能大概maybe 是其他三方库使用到了吧.反正我这样就好了
如果还是会报这个错.可以试试
1.Close the running packager
 2.Run react-native link react-native-vector-icons

3.Then run react-native start --reset-cache

4.Finally run react-native run-ios to restart the simulator
47.iOS 真机运行Test报错:Linker command failed with code 1(use -v to see invacation)
如

搞半天也没弄好,怀疑我之前开发iOS原生是不是运气太好了.一次木碰到.惹急了,直接把edit scheme里面的test全部取消.

OK,反正我test不用,你给我一边歇着去.

48.<Text>文本换行.
如:
                        <Text>电话:110{'\r\n'}地址:无</Text>
 49.在使用集成react-native-image-crop-pickeriOS正常可运行.但是Android却报错.配置也按照官方设置了.
报错信息:undefined is not an object (eva........)
请参看这个 1  2.本人是靠2修复的
 50.Connection to localhost port 8081 [tcp/sunproxyadmain] succeded!
     Port 8081 already in use.package is eiteher not not runnig correctly..........
很直白的报错信息.断后被占用.
.lsof -i  :8081
一看是大快播.惭愧.....
杀掉进程.
sudo kill -9 PID号码
ok.整个世界清静了.
51.拉取代码,显示HTTP Basic: Access denied ......
这个问题,烦死我了.配置SSH,没用,换网络没用,然后发现gitlab密码是初始的.然后我修改下密码.再是不行.
终端: git config --global http.sslVerify false  (保证再次输入需要密码)
ok,再拉取,需要重新输入密码.OK,搞定 
52.npm install失败.
如图,无法,我一开始以为是库依赖的版本写错了.发现不是.然后https://www.npmjs.com/package/@babel/core 在里面安装了下
yarn add @babel/core --dev 还是不行,最后yarn install 会让你选择版本,选择框中那个版本即可......哎 
 53.去新公司,发现公司的库太新了,而我的node,npm是去年安装的.需要更新,不更新部分库完全安装不上......
无奈只能回去更新,卸载node npm:  https://www.jianshu.com/p/920961b6a538
然后在更新:  brew install watchman 发现updating homebrew...卡住不动.

我一开始替换淘宝源发现不行.反而导致完全无法使用npm了,连react-native init xxxx都失效.
报错:info there appears to be trouble with your network connetrion.Retrying....
妈呀.我只能替换回来.
npm config list   查看源
npm config delete registry  删除源
OK,回到起点.更新一直卡住: https://my.oschina.net/jouypub/blog/1921158
现在可以了.
54.pod install一直卡住.一会失败:RPC failed; curl 18 transfer closed with outstanding read data remaining
先翻个墙.
直接终端: git config --global http.https://github.com.proxy socks5://127.0.0.1:1086
然后在pod install,好了. 
55.如果在RN工程中使用了Eslint,但是又突然不想被限制.直接在XXX.js上加:
/* eslint-disable */
也可以对部分进行限制 
/* eslint-disable no-new */
56.之前集成云信的时候,添加了地图库.但是不知为何最近一用Xcode启动就报 #import <MAMapKit/MAMapKit.h> file not found
,使用命令行启动就好的.

使用  react-native unlink react-native-amap3d

56.Android报错:Error:found unexpected optical bounds (red pixel) on top border at x=106.
在gradle.properties文件下添加
android.enableAapt2 = false
 57.出现 Java.util.NoSuchElementException........
取消你的Instant run功能:  https://blog.csdn.net/u013762572/article/details/80571770
 58.React Native 发送短信且自带文字
if(Platform.OS==="ios"){
 Linking.openURL("sms:12345678901&body=短信内容");
}else{
 Linking.openURL("sms:12345678901?body=短信内容);
59.android: Native module HttpCacheModule tried to overrride HttpCacheModule for module name RCTHttpCache.if this was your intention.....　
我的问题是我多link了一次,导致引入多了一次,删除多余的即可.
60.Android真机报错: **Configuration ‘compile’ is obsolete and has been replaced with ‘implementation’. 
It will be removed at the end of 2018** 

这个无聊的问题搞了我半小时.又是升级又是修改Android代码的.最后发现是真机连接时,忘记点弹框的允许调试了....
61.无论怎么修改数据源(除了清空数据源),FlatList始终不会再次render.
就像这样子
无论怎么修改数据源(除了清空数据源),无法再次render.但是改为下面这样,单纯加个style就好了...
这样子,只要修改数据源,就会再次render.....至今搞不懂原理..........
 62.Android真机 Execution failed for task ':app:installDebug'. 
我的解决办法是 把原来安装的那个app删除,然后再安装就好了.
63.android打包错误:
 uncompiled PNG file passed as argument. Must be compiled first into .flat file..
org.gradle.configureondemand=true


到android/gradle.properties中
64.关掉webStorm中双击shift打开搜索框.
1.按command+shift+a打开,然后输入registry,点击进入
 2.找到ide.suppress.double.click.handler一栏,后面打上勾.然后点击close关闭即可
 65.时隔半年,再次入坑RN.集成redux时报引入Provider出现.如图:
npm installl也有时会失败,我出现这个原因是前几天我重新安装了node.js.但是是最新版本,不是稳定版. 我重新卸载npm和node之后重新安装稳定版就好了.
66.error Received malformed response from registry for undefined. The registry may be down.
一开始我以为是npm或者rn升级出啥幺蛾子了...最后查了十分钟,发现是那堵无比令人恶心的墙...fuck!!!!!!XXX,你们做的那点破事,别藏着掖着了.恶心不?
解决办法,换个淘宝源或者翻个墙就行.
 67.Can not find variable :Component
import React, {Component} from 'react';
 68.出现 
错误: 找不到或无法加载主类 org.gradle.wrapper.GradleWrapperMain
我的办法是删除android/gradle/wrapper/  下的gradle-wrapper.jar然后再次运行即可
后续工作遇到再写.