react-native学习过程记录

1、关于react-native init 创建项目报错 cli.init is not a function 问题解决

直接采用npx react-native init chapter2 --version 0.68.2 创建项目（即指定version）

参考地址：https://blog.csdn.net/qq_42231156/article/details/126396576

2、解决 Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8

直接修改项目的指定的java版本(前提是安装了java11)

项目中 android/gradle.properties 新增如下配制

org.gradle.java.home= java11的sdk路径

例如： org.gradle.java.home=D:/all self program files/JavaJdk11
注意：路径中 是 / ,而非 \

3、启动项目在真机上调试

• 1、电脑连接手机，同时手机开启调试模式，使用adb devices命令，检查你的设备是否能正确连接到 ADB。(注意电脑与手机应在同一个网络内)
  
• 2、运行 adb reverse tcp:8081 tcp:8081
• 3、在该项目所在文件夹内，运行命令npx react-native run-android启动项目

4、响应式布局

flex + Dimensions

import React, {
    
     Component } from 'react'
import {
    
     Text, StyleSheet, View,Dimensions } from 'react-native'

// Dimensions : 获取窗口信息

export default class index extends Component {
    
    
  render() {
    
    
    return (
      <View style={
    
     styles.container }>
        <View style={
    
    [styles.itemBase]}>
           <Text style={
    
    [ styles.h3 ]}> 扫一扫 </Text>
        </View>
        <View style={
    
    [styles.itemBase]}>
           <Text style={
    
    [ styles.h3 ]}> 付款码 </Text>
        </View>
        <View style={
    
    [styles.itemBase]}>
           <Text style={
    
    [ styles.h3 ]}> 出行 </Text>
        </View>
        <View style={
    
    [styles.itemBase]}>
           <Text style={
    
    [ styles.h3 ]}> 卡包 </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
    
    
    container:{
    
    
        flexDirection:'row',
        flexWrap:'wrap'
    },
    itemBase:{
    
    
        justifyContent:'center',
        alignItems:'center',     
        backgroundColor:'#00b3e2',
        width:Dimensions.get("window").width/3,   // 获取屏幕宽度
        height:100,
        borderWidth:1,
        borderColor:'yellow',
        fontSize:30
    },
    h3:{
    
    
        fontSize:20
    }

})

5、RN中的组件

• 核心组件
  
  
  
  
  

• 第三方组件

• 自定义组件