react-native学习过程记录

一月清辉

已于 2022-12-29 11:44:41 修改

阅读量706

点赞数

分类专栏： react 文章标签： react-native

于 2022-12-28 18:16:08 首次发布

本文链接：https://blog.youkuaiyun.com/yiyueqinghui/article/details/128472232

版权

react 专栏收录该内容

17 篇文章

订阅专栏

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

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

参考地址：https://blog.youkuaiyun.com/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
    }

})