安装步骤
- 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 - 6.运行项目
npx react-native run-android - 7.在VSCode里打开该项目
修改APP.js，制作自己想要的页面效果
核心组件和原生组件
JSX——是一种在 JavaScript 中嵌入 XML 结构的语法
例如：<View><Text>Hello world!</Text></View>写法
Props（属性）
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。
自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center', marginTop: 50}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
最终3个名字会被依次输出。
State（状态）
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。
一般来说，需要在class中声明一个state对象，然后在需要修改时调用setState方法。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。
每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。
【注意】：
- 一切界面变化都是状态state变化
- state的修改必须通过setState()方法
- this.state.likes = 100; // 这样的直接赋值修改无效！
- setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
- setState 是异步操作，修改不会马上生效
样式的书写
在return里面写：
<View>
<Text style={[styles.red,styles.big]}>我是内联样式文本</Text>
<Text style={{fontWeight:"bold"}}>我是行内样式文本</Text>
<Text style={{...styles.big,color:"yellow", fontStyle:"italic"
}}>我是内联+行内混合样式文本</Text>
</View>
在render函数外部定义样式：
const styles = StyleSheet.create({
center:{justifyContent:"center",alignItems:"center"},
row:{flexDirection:"row",justifyContent:"space-around"},
col:{flex:1,height:180},
big:{fontSize:48},
red:{color:"#f30"}
});
文本输入框组件
TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。
触摸组件（Button）
<Button
onPress={()=>alert("你好世界")}
title="确定"
color="#f30"></Button>
其中onPress是回调函数，title是按钮上显示的文字，color是按钮颜色；
也可以作为警告框，拥有多个选项，从而弹出不同内容：
<Button
onPress={()=>Alert.alert("小胖别吃了好吗？","你已经160斤了！",[
{text:'不行',onPress:()=>alert("小胖：不行我饿")},
{text:'好吧',onPress:()=>alert("小胖：好吧我不吃了")},
{text:'难过',onPress:()=>alert("小胖：我是单身狗，胖点怕啥")},
])}
title="询问小胖"
color="blue"></Button>
可以看到我们设置了三个选项，每一项都会弹出不同的内容，内容也是自己设置的；
触摸组件（Touchable 系列组件）
这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计，那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮
使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
在 Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
如果想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback
某些场景中可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用
onLongPress属性来实现。
滚动视图
ScrollView是一个通用的可滚动的容器，可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
ScrollView适合于显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染
长列表
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间的结构近似而仅数据不同。
FlatList和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设置好格式的组件来渲染。
例如渲染数据：
<FlatList
keyExtractor={item=>item.ID}
data={this.state.movies}
numColumns={3} //一行显示3个
columnWrapperStyle={styles.row} //增加下方写的样式
renderItem={({item})=>{return(
<View style={{marginTop:20}} key={item.ID}>
<Image
style={{width:135,height:160}}
source={{uri:item.defaultImage}}></Image>
<Text style={{marginTop:5,textAlign:"center"}}>{item.MovieName}</Text>
</View>
)}}
/>
- flatList长列表组件，
- keyExtractor是key抽取
- data数据指定
- numColumns行的数量，
- renderItem列的渲染
- columnWrapperStyle行的样式指定
网络请求
一般长列表的数据都是通过网络请求获取的；然后渲染到页面；
传统方式如下：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST', //请求方式
headers: {
'Content-Type': 'application/x-www-form-urlencoded', //请求头
},
body: 'key1=value1&key2=value2', //请求体
});
上面的示例演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据。网络请求天然是一种异步操作；异步的意思是你应该提取方法会返回一个Promise，这种模式可以简化异步风格的代码;
如下所示：
function getMoviesFromApiAsync() { //获取电影xx的方法，自己创建的
return fetch('https://facebook.github.io/react-native/movies.json') //接口网站
.then((response) => response.json()) //将请求到的数据转为json格式
.then((responseJson) => {
return responseJson.movies; //请求成功返回数据
})
.catch((error) => {
console.error(error); //请求失败，输出错误
});
}
