1. 需要安装软件
a.安装环境和软件
- node.js
- python2.7
- Android Studio
- Java-JDK
- mumu模拟器，这里用mumu模拟器(其它也可)
2. Android studio 安装与配置
- 下载SDK
Android SDK Platform 28
Intel x86 Atom_64 System Image
- 配置ANDROID_HOME 环境变量
C:\Users\Administrator\AppData\Local\Android\Sdk
- platform-tools 添加到path
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools
Android studio安装：
步骤 1 -- 一路下一步(可以选择安装位置)一直到下面的界面：
1.png
步骤 2.-- 点击红色简单哪里进入SDK Manager界面如下，9.0-----OK
2.png
步骤 3 --配置ANDROID_HOME 环境变量
3.png
步骤 4 -- platform-tools 添加到path
4.png
3. npm配置
1. 安装nrm切淘宝源
1.cmd窗口全局安装 nrm
npm install -g nrm
// npx 会帮你执行依赖包里的二进制文件。
// nrm是npm的镜像源管理工具
2.使用nrm工具切换淘宝源
npx nrm use taobao
nrm ls 查看源list
2. 安装react-native-cli 脚手架
1. 安装cli
npx install react-native-cli -g
2. 初始化项目
npx react-native init myapp
3. android / build.gradle 配置阿里源
allprojects {
repositories {
mavenLocal()
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
....
}
4. 运行android和虚拟机
a. 打开mumu模拟器
b. cd /myapp 切到项目目录
c. adb connect 127.0.0.1:7555 链接模拟器
d. npx react-native run-android 启动服务
4. 项目目录结构
目录结构.png
=============================================================
5. 项目启动之 hello world
a. 打开mumu模拟器
b. cd /myapp 切到项目目录
c. adb connect 127.0.0.1:7555 链接模拟器
d. npx react-native run-android 启动服务
// npx react-native start 不编译直接运行
app.js / app.css 中删除不需要内容
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}
6. 常用组件
a. View & Text 文本
<View>
<Text>hello world</Text>
</View>
b. Button 按钮
<View style={styles.center}>
<Button
onPress={()=>alert("你好世界")}
title="确定喜欢你"
color="#f30">
</Button>
</View>
c. alert 警告弹出框
<View style={styles.center}>
<Button
onPress={()=>Alert.alert("做我女盆友好吗？","我暗恋你很久了",[
{text:'可行?',onPress:()=>alert("备胎愿意吗")},
{text:'取消',onPress:()=>alert("你是个好人")},
{text:'确定',onPress:()=>alert("就是你了")}
])}
title="请确认" >
</Button>
</View>
d. 上面的style
const styles = StyleSheet.create({
center:{justifyContent:"center",alignItems:"center"}
});
e. 完整
import React,{Component} from 'react'; // 导入React
import {
SafeAreaView, // 安全 刘海屏
StyleSheet, // 样式表
ScrollView, // 滚动内容区域
View, // 块 视图
Text, // 文本
StatusBar, // 状态栏
Button, // 按钮
Alert, // 导入弹出框组件
} from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView>
<View>
<Text>hello world</Text>
</View>
<View style={styles.center}>
<Button
onPress={()=>alert("你好世界")}
title="确定喜欢你"
color="#f30">
</Button>
</View>
<View style={styles.center}>
<Button
onPress={()=>Alert.alert("我超级喜欢你","我已经无可救药了，你就是我的解药")}
title="弹出"
color="#f30">
</Button>
</View>
<View style={styles.center}>
<Button
onPress={()=>Alert.alert("做我女盆友好吗？","我暗恋你很久了",[
{text:'可行?',onPress:()=>alert("备胎愿意吗")},
{text:'取消',onPress:()=>alert("你是个好人")},
{text:'确定',onPress:()=>alert("就是你了")}
])}
title="请确认" >
</Button>
</View>
</ScrollView>
</SafeAreaView>
</>
);
}
}
const styles = StyleSheet.create({
center:{justifyContent:"center",alignItems:"center"}
});
export default App;
7. 图片组件和 CSS
a. 本地图片
<TouchableOpacity onPress={()=>alert("HI pic")}> //添加手指点击事件
<Image // TouchableOpacity 触摸半透明组件
style={{width:100,height:100}}
source={require("./assets/sun.jpg")}/>
</TouchableOpacity>
b. 网络图片
<Image style={{width:160,height:90}}
source={{uri:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a2239e10e392af73b6b7a737a039d6.jpg?w=632&h=340'}}
></Image>
c. 图片css（行内）
<View>
<Text>{this.state.msg}</Text>
<TextInput
value={this.state.msg}
onChangeText={text=>this.setState({msg:text})}
style={{height:40,borderColor:'gray',borderWidth:1}}></TextInput>
</View>
d. 图片css
<View style={styles.row}>
<Image style={styles.col}
source={{uri:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a2239e10e392af73b6b7a737a039d6.jpg?w=632&h=340'}}
/>
<Image style={styles.col}
source={{uri:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a2239e10e392af73b6b7a737a039d6.jpg?w=632&h=340'}}
/>
</View>
e. RN中的 css
<View>
<Text style={[styles.big,styles.orange]}>我是条可爱的文本</Text>
<Text style={{fontWeight:'bold',fontStyle:"italic"}}>我才是勇气文本</Text>
<Text style={{...styles.big,...styles.orange,fontStyle:"italic"}}>我是条可爱的文本</Text>
</View>
f. 完整
import React,{Component}from 'react';
import {
SafeAreaView, // 安全区域 刘海屏
StyleSheet, // 样式表
ScrollView, // 视图滚动区域
View, // 视图内容
Text, // 文本标签
StatusBar, // 状态栏
Image,
TouchableOpacity, //触摸半透明组件
TextInput,
} from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = { msg:"你好RN" };
}
render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView>
<View><Text>你好 react-native</Text></View>
<TouchableOpacity onPress={()=>alert("HI pic")}>
<Image
style={{width:100,height:100}}
source={require("./assets/sun.jpg")}/>
</TouchableOpacity>
<Image style={{width:160,height:90}}
source={{uri:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a2239e10e392af73b6b7a737a039d6.jpg?w=632&h=340'}}
></Image>
<View>
<Text>{this.state.msg}</Text>
<TextInput
value={this.state.msg}
onChangeText={text=>this.setState({msg:text})}
style={{height:40,borderColor:'gray',borderWidth:1}}></TextInput>
</View>
<View style={styles.row}>
<Image style={styles.col}
source={{uri:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a2239e10e392af73b6b7a737a039d6.jpg?w=632&h=340'}}
/>
<Image style={styles.col}
source={{uri:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a2239e10e392af73b6b7a737a039d6.jpg?w=632&h=340'}}
/>
</View>
<View>
<Text style={[styles.big,styles.orange]}>我是条可爱的文本</Text>
<Text style={{fontWeight:'bold',fontStyle:"italic"}}>我才是勇气文本</Text>
<Text style={{...styles.big,...styles.orange,fontStyle:"italic"}}>我是条可爱的文本</Text>
</View>
</ScrollView>
</SafeAreaView>
</>
);
}
}
// react Native css
// 没有百分比数值,不用单位默认是pt,默认flex弹性布局,布局方向默认垂直布局
const styles = StyleSheet.create({
row:{flexDirection:"row"},
col:{flex:1,height:180},
big:{fontSize:48},
orange:{color:"#F30"}
});
export default App;
网友评论