React-native,我们一起走过的坑。

前几个星期，点开了RN的技能树，废话不多说，那我就意简言赅地记录一下自己遇到的坑，避免后人再犯自己的错误。

先说明一下我的运行环境：
1.我当时这个年代用的RN版本是0.55
2.使用的脚手架是create-react-native-app

调试

EJECT前（即生成那个android和ios文件前）

如果你像我那样，按照官方的说明方法：初始化了一个项目
但也是找不到android和ios文件的话，不要慌张，要淡定，因为这时你还没有EJECT，官方解析就是：
“eject” eventually to create your own native builds
但是，是男人的话怎么能那么快eject的，所以这时就该大名鼎鼎的’Expo’登场了，你只需要在你的手机或者模拟器上安装上这个最新版的’Expo’软件，然后在你的本地项目运行命令npm start，这时不出意料的话你就会弹出一个二维码出来（但是不知为何我每次都是出意外地弹了一个崩了的二维码），在你的Expo上扫一扫就能运行成功了，当然最后是少不摇一摇你的手机打开调试，Android模拟器：Command⌘ + M，iOS模拟器：Command⌘ + D，打开Enable Live Reload,然后你就能愉快地撸码了。
但是身为一个前端工程师，一眼见不到那个盒子模型，心里总会不舒服的，这时，你只要执行上面一样的操作，选择Show inspector就行了。

EJECT后

这时候，情况就比较尴尬了
这时你已经进入了贤者模式，而你的项目结构也会发生一些微妙的变化，看你能不能找出来，找出来后，这时候你要面对就是那个android文件夹和ios文件夹，身为一个只懂JS的前端工程师的我来说，一开始我是拒绝的
但是深入理解之后，我发现我其实根本不用管它们的。
当运行npm run android/npm run ios后，你的手机/模拟器毫无意外就会被强制地安装上了一个应用了，这时候调试同上的。

总结
普通手机应用的话还是eject后真机模拟器调试方便的，不竟后面还有一些你预想不到的一些npm模块居然还要更改android文件什么才能用的，哼(￢︿̫̿￢☆)
如果你那么不幸，像我一样要开发什么鬼特制机的话，那些机全身上下只有一些USB接口，而接上电脑后又完全没有响应的话，这时候EXPO那骚一般的远程调试就适合不过了

样式

不能继承 不能继承 不能继承

好吧，我先深呼吸一下，先放些代码给大家感受下

<View style={styles.view}>
    <Text style={styles.text}></Text>
    <Text style={styles.text}></Text>
</View>
const styles = StyleSheet.create({
  view: {
    width:300,
  }，
  text：{
    fontSize:10,   
  }
 }

如果你想把这个view里面的text字体都设为10的话怎么办？
嗯，没错，你只能乖乖地每一个text都写上一个样式了。
好吧，首先我们要知道它是模仿css的规则的而已，所以也就只能这样了。

默认尺寸是DP

百分比不能用
可以用flex:1,flex:2,做等比例

组件坑

Image

要先设宽高

为了性能方便所有网络图片都要先设固定宽高（来自官方傲娇的解析）
像这样

 <Image 
    style={{width: 100, height: 100}}
    source={{uri: url}}
/>

那么问题来了，我特么的怎么知道图片的尺寸是什么。
解决方法：
1、使用Image自带的getSize方法先获取宽高
2、使用别的大神的组件React Native Fit Image 等

资源超过400kb左右不显示

所以说原生组件，😔
推荐使用别的组件库：react-native-fast-image（要先装个glide，略为麻烦）

静态资源

source={require(‘./xxx.jpg’)} 资源路径不能拼接，但可以这样写

const a=require('./xxx/')
<Image source={a}/>

点击事件尽量使用Touchable开头的

react-navigation

官方推荐的路由组件库
我使用StackNavigator方法
坑1： navigation.goBack()，返回上一个页面所有生命周期都没有进入，不像小程序有一个onShow周期
坑2：navigation.goBack()，不能带参数
我的解决办法：
1、把方法传进下一个页面，goBack()前调用
2、传入route_key，使用setParams方法传参

打包

建议按官网流程
我踩过的坑：index.js 里的 registerComponent 不同app要不一样

未完待续