react Native基础

选择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',
  }),
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值