选择react-native的几个重要因素:
1.跨平台:这可能是最重要的原因了,可以节省人月
2.基于React框架开发,组建化,响应式思路,调试方式可以缩短开发周期(在开发者熟练使用的情况下),也可以调整前端开发资源
3.热更新:APP当时修复BUG基本都是重新发版,周期比较长,热更新是解决这一个痛点是最好的选择
4.新技术调研,扩展技术栈
整体架构
安装
1.安装依赖
必须安装的依赖有:Node、Python2、JDK 和 Android Studio( Node 的版本应大于等于 12,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本))
2.cmd安装
nrm 管理npm下载源:npm install nrm -g和nrm ues taobao
react-native-cli native脚手架:npm install react-native-cli-g
3.配置环境变量
ANDROID_HOME—安卓sdk所在的目录
platform-tools 平台工具:
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools;
Java jdk/bin 目录:
C:\Program Files\Java\jdk1.8.0_202\bin
4.初始化项目
npx react-native init myapp
添加安卓依赖包的源地址(阿里):android/build.gradle
5.连接模拟器(mumu)
先打开mumu模拟器,然后cmd输入adb connect 127.0.0.1:7555
(mumu模拟器为例)
夜神模拟器端口号:62001
海马模拟器端口号:26944
逍遥模拟器端口号:21503
MuMu模拟器端口号:7555
天天模拟器端口号:6555**
6.运行项目
npx react-native run-android
7.在VSCode里打开该项目
修改APP.js,制作自己想要的页面效果
常用组件
Component
Component:组件,使用extends React.Component创建的类为组件。? componentWillMount()还可以用constructor来代替:
class Label extends React.Component{
constructor(props) {
super(props);
}
render(){
}
}
props属性:
组件可以定义初始值,自己不可更改props属性值,只允许从父组件中传递过来:
// 父组件
class ParentComponent extends React.Component{
render(){
return(<Child name="name">);
}
}
// 子组件
class Child extends React.Component{
render(){
return(<Text>{this.props.name}</Text>);
}
}
父组件向子组件传递name="name"的props属性,在子组件中使用this.props.name引用此属性。
属性类型prop type和默认属性 default prop可以通过类中的 static来声明:
class Demo extends React.Component {
// 默认props
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}
// propTypes用于验证转入的props,当向 props 传入无效数据时,JavaScript 控制台会抛出警告
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
}
state = {
loopsRemaining: this.props.maxLoops,
}
}
state属性:
组件用来改变自己状态的属性,通常使用setState({key:value})来改变属性值触发界面刷新,不能使用this.state.xxx来直接改变。 在开发中,一般不会在定时器函数(setInterval、setTimeout等)中来操作state。典型的场景是在接收到服务器返回的新数据,或者在用户输入数据之后。
对于经常改变的数据且需要刷新界面显示,可以使用state。对于不需要改变的属性值可以使用props。React Native建议由顶层的父组件定义state值,并将state值作为子组件的props属性值传递给子组件,这样可以保持单一的数据传递。
Button 点击事件
<Button
onPress={() => {
Alert.alert('You tapped the button!');
}}
title="Press Me"
/>
注意:
onPress={this._Handler()}//这样写_Handler方法就执行执行了,因为这样是把_Handler运行完返回的值给onPress了
需要这样写
onPress={()=> this._Handler()}//这种就是把onPress方法赋值给onPress
POST请求
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});