前几个星期,点开了RN的技能树,废话不多说,那我就意简言赅地记录一下自己遇到的坑,避免后人再犯自己的错误。 先说明一下我的运行环境: 1.我当时这个年代用的RN版本是0.55 2.使用的脚手架是create-react-native-app
如果你像我那样,按照官方的说明方法:初始化了一个项目 但也是找不到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就行了。
这时候,情况就比较尴尬了 这时你已经进入了贤者模式,而你的项目结构也会发生一些微妙的变化,看你能不能找出来,找出来后,这时候你要面对就是那个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的规则的而已,所以也就只能这样了。
百分比不能用 可以用flex:1,flex:2,做等比例
为了性能方便所有网络图片都要先设固定宽高(来自官方傲娇的解析) 像这样
<Image
style={{width: 100, height: 100}}
source={{uri: url}}
/>
那么问题来了,我特么的怎么知道图片的尺寸是什么。 解决方法: 1、使用Image自带的getSize方法先获取宽高 2、使用别的大神的组件React Native Fit Image 等
所以说原生组件,😔 推荐使用别的组件库:react-native-fast-image(要先装个glide,略为麻烦)
source={require(‘./xxx.jpg’)} 资源路径不能拼接,但可以这样写
const a=require('./xxx/')
<Image source={a}/>
官方推荐的路由组件库 我使用StackNavigator方法 坑1: navigation.goBack(),返回上一个页面所有生命周期都没有进入,不像小程序有一个onShow周期 坑2:navigation.goBack(),不能带参数 我的解决办法: 1、把方法传进下一个页面,goBack()前调用 2、传入route_key,使用setParams方法传参
建议按官网流程 我踩过的坑:index.js 里的 registerComponent 不同app要不一样
未完待续