安装
软件
- java
- Android Studio
- Nodejs
- mumu模拟器（别的也可以）
cmd安装
nrm 管理 npm 下载源
npm install nrm -g
nrm use taobao
react-native-cli
native 脚手架
npm install react-native-cli -g
环境变量配置
ANDROID_HOME 安卓sdk所在对的目录
platform-tools 平台工具
C:\Users\28688\AppData\Local\Android\Sdk\platform-tools
java jdk/bin 目录
C:\Program Files\Java\jdk1.8.0_202\bin
初始化项目
npx react-native init myapp
添加安卓依赖包的源地址（阿里）
android/build.gradle
allprojects {
repositories {
mavenLocal()
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
....
}
连接模拟器
打开mumu模拟器
adb connect 127.0.0.1:7555
运行项目
npx react-native run-android
写一个最简单的Hello World
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>
);
}
}
Props（属性）
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
自定义的组件也可以使用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>
);
}
}
State（状态）
我们使用两种数据来控制一个组件：props和state。
- props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。
- 对于需要改变的数据，我们需要使用state。
一般来说，你需要在class中声明一个state对象，然后在需要修改时调用setState方法。
提示一些初学者应该牢记的要点：
- 一切界面变化都是状态state变化
- state的修改必须通过setState()方法
this.state.likes = 100; // 这样的直接赋值修改无效！
setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
setState 是异步操作，修改不会马上生效
处理文本输入
TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。
import { Text, TextInput, View } from 'react-native';
export default function PizzaTranslator() {
const [text, setText] = useState('');
return (
<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>
);
处理触摸事件
移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。
<Button
onPress={() => alert("在来一首")}
title="桥边姑娘"
color="#f30"
/>
点击这个按钮会调用"onPress"函数，具体作用就是显示一个 alert 弹出框。你还可以指定"color"属性来修改按钮的颜色。
使用滚动视图
ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';
export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return (
<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Text style={{fontSize:96}}>If you like</Text>
<Text style={{fontSize:96}}>Scrolling down</Text>
<Text style={{fontSize:96}}>What's the best</Text>
<Text style={{fontSize:96}}>Framework around?</Text>
<Text style={{fontSize:80}}>React Native</Text>
</ScrollView>
);
}
}
ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的FlatList组件。
使用长列表
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
import React,{Component}from 'react';
import {
SafeAreaView, // 安全区域 刘海屏
StyleSheet, // 样式表
ScrollView, // 视图滚动区域
View, // 视图内容
Text, // 文本标签
Button,
StatusBar, // 状态栏
Image,
TouchableOpacity, //触摸半透明组件
TextInput,
FlatList,
} from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = { msg:"你好RN",movies:[]};
}
componentDidMount() {
this.getMovies();
}
getMovies(){
fetch(
"http://www.endata.com.cn/API/GetData.ashx",
{
method:"post",
body:'areaId=50&typeId=0&year=0&initial=&pageIndex=1&pageSize=10&MethodName=BoxOffice_GetMovieData_List',
headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"}
})
.then(res=>res.json())
.then(res=>{
console.log(res);
this.setState({movies:res.Data.Table});
})
}
render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<FlatList
keyExtractor={item=>item.ID}
data={this.state.movies}
numColumns={3}
columnWrapperStyle={styles.row}
renderItem={({item})=>{return(
<View style={{marginTop:30}}>
<Image style={{width:130,height:160}}
source={{uri:item.defaultImage}} />
<Text style={{marginTop:5}}>{item.MovieName}</Text>
</View>
)}}
/>
{/* 1. 注释scrollView 里面的所有内容
FlatList 做列表
keyExtractor key 抽取
data 数据指定
numColumns 行的数量
renderItem 列的渲染 */}
</SafeAreaView>
</>
);
}
}
// react Native css
// 没有百分比数值,不用单位默认是pt,默认flex弹性布局,布局方向默认垂直布局
const styles = StyleSheet.create({
row:{flexDirection:"row",justifyContent:"space-between"},
col:{flex:1,height:180},
big:{fontSize:48},
orange:{color:"#F30"}
});
export default App;
效果图：
网友评论