安装 node ,homebrew
brew install node
brew install watchman
安装 eact-native-cli
npm install -g yarn react-native-cli
安装第三方库
npm i xxx
创建项目
react-native init AwesomeProject
运行项目
react-native run-ios
指定模拟器
react-native run-ios —simulator ‘iPhone XS Max'
输出 react-native info
react-native info
是否换行 wrap or nowrap
flexWrap :
主轴的对齐方式
justifyContent
侧轴的对齐方式
alignItems : stretch 拉伸
修改子视图的对齐方式,父视图的不起作用
alignSelf
主轴上内容的权重比
flex
绝对布局,之后可以使用left ,top
position:absolute
插件:
安装 react-navigation
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler
安装
npm i react-native-vector-icons —-save
react-native link react-native-vector-icons
报错 Check the render method of TabBarIcon
解决办法 把括号去掉
import {Ionicons} from "react-native-vector-icons/Ionicons”;
//删除 node_modules 并重新运行
rm -rf node_modules && npm install
安卓模拟器刷新
command + m
DeviceEventEmitter 的使用,监听器类似于iOS 的通知 ,部分刷新
DeviceInfo.isIPhoneX_deprecated ? 30 : 0 适配iPhone X
如何自定义一个react-native 组件
安卓物理返回键的处理,
iPhone X 的适配
webview 的使用
JSON.parse() 解析成js 对象
JSON.stringify() json对象转成字符串
react-native-event-bus 事件总线模式,跨页面通信
全面屏的适配问题