简单说说 React Native的几个优点
1.跨平台
2.开发成本低
3.性能高
4.支持动态更新
用了 React Native 有哪些好处呢,就是一套代码同时可以在Android和ios上应用,提高了代码的复用率
搭建开发环境
1.需要安装Note.js
2.需要安装React Native 的命令行工具 React Native Command Line
3.开发安卓的Android Studio / 开发ios 的X Code
在Windows平台上搭建React Native的开发环境
先安装Node.js https://nodejs.org/en/download
安装教程如下
https://www.runoob.com/nodejs/nodejs-install-setup.html
安装成功之后我们在安装React Native的命令行工具
npm install -g react-native-cli
react-native --help命令来查看 RN支持的命令
react-native upgrade 加载安卓ios库
//终端的显示
Microsoft Windows [版本 10.0.17134.1]
(c) 2018 Microsoft Corporation。保留所有权利。
//查看版本 查看node.js是否安卓成功
C:\Users\Administrator>npm -v
6.13.4
//安装react native 的环境
C:\Users\Administrator>npm install -g react-native-cli
C:\Users\Administrator\AppData\Roaming\npm\react-native ->
C:\Users\Administrator\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ [email protected]
added 72 packages from 25 contributors in 66.181s
之后呢就安装我们的Android Studio
创建我们的第一个RN项目
打开终端输入 react-native init +项目名
创建完成后目录是这样的
将我们的android studio打开 加载目录下的android目录
这是加载js的配置
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
//这里是加载我们的运行的第一个头文件
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this); // Remove this line if you don't want Flipper enabled
}
/**
* Loads Flipper in React Native templates.
*
* @param context
*/
private static void initializeFlipper(Context context) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
}
打开终端保证设备连接,调到我们项目的目录,执行 npm install
在执行react-native run-android 即可安装到我们的设备上
这个时候我们可以开始开发我们的RN项目了
首先我们找到App.js这个文件
import React from 'react';
import{View,Text,StyleSheet} from 'react-native';
const App = () =>{
return(
<View style={Styles.container}>
//编写我们的布局,嵌套各种布局
</ZiDingYi>
</View>
);
};
//定义每个组件的样式
const Styles = StyleSheet.create(
{
container:{
flex: 1,
alignItems:'center',
}
});
//写完不要忘记导出
export default App
上面中的</ZiDingYi>标签我们可以,写一个自定义的组合视图,然后export导出,在App.js中import导入我们编写的ZiDingYi,比如本页面导出的是App我们也可以在别的页面中使用App这个页面
常用的控件属性就是我们在给控件设置样式时,比如要设置大小颜色什么的,可以直接在的属性中设置
<View style={Styles.container}>
比如这行代码,我们定义了一个View,他的样式就是我们写在Styles中的container样式,这样我们可以给我们的控件设置各种样式,完成我们想要做的页面。
FlexBox布局的常用的属性
//flex 控制权重的,类似安卓里 LineaLayout 中的weight, 但是在这里有点不同,在RN当中,
//这个是表示充满父容器。如果是根节点,那么就会充满整个屏幕。
//flexDirection 子集标签排列方向
//justifyContent 设置横轴的对其方式
//alignItems 设置竖轴的对其方式
还有很多内容大家想学习可以查阅RN的中文API :https://reactnative.cn/docs/view/
接下来我们写一个网络请求,点击每个item吐司,item为图文混排主要实现效果是这样的
import React, { Component } from 'react';
import{View,Text,FlatList,Dimensions,
TouchableOpacity,ToastAndroid,Image} from 'react-native';
//获取屏幕的宽高
var width = Dimensions.get('window').width
var height= Dimensions.get('window').height
var url ="http://www.qubaobei.com/ios/cf/dish_list.php?stage_id=1&limit=10&page=1"
class App extends Component{
//构造
constructor(props){
super(props);
//定义state,当state改变时,会重新调用我们的render函数重新绘制我们的View
//举个例子就是我们给我们的一个Text组件赋一个变量,当这个变量值改变时就会重新绘制我们的Text从而动态改变Text显示的内容
this.state = {
datas : []
}
}
//Rn的生命周期,页面创建时调用
componentDidMount(){
this.loadData()
}
//网络请求我们的数据
loadData(){
//调试的时候可以打印
console.warn("asdasdasd")
//加载我们的url
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
//responseJson就是我们转换成的json对象可以直接调用这个对象中的属性,也就是json对象中的属性
console.warn(responseJson.data)
//更新我们的state,改变页面显示的数据
this.setState({
datas:responseJson.data
})
console.warn(responseJson)
})
//当请求失败的时候我们在这里处理
.catch((error) => {
console.error("cuowu65465464");
});
}
//render函数就是绘制我们的View,他也只能返回一个View
render(){
return(
<View style = {
{flex:1}}>
{/* 类似我们的ListView */}
<FlatList
// 设置数据源
data = {this.state.datas}
renderItem={({item}) =>
// 在这里我们可以通过Index来判断返回我们想要的View,从而实现了多布局
<TouchableOpacity onPress = {()=>{ToastAndroid.show(item.title,ToastAndroid.SHORT)}}>
<View style={
{flexDirection:'row',backgroundColor:"#f34f56",margin:2}}>
<Image source = {
{uri:item.pic}} style = {
{width:50,height:50,backgroundColor:"#f00",borderRadius:45}}></Image>
<Text style = {
{textAlign:'center',margin:1,flex:1,textAlign:'center'}}>
{item.title}
</Text>
</View>
</TouchableOpacity>}/>
</View>
)
}
}
//导出
export default App