react native react.js 前端框架 前端 ReactNative 学习总结 个人梳理

目录

一、基本使用

1、创建项目

2、ReactNative的布局默认为flex布局，View标签不能直接写入文字，样式不会被继承, 单位不能加px,vh,vw等可以是百分比。

3、快速获取屏幕尺寸，Dimensions

4、StyleSheet的使用

5、Alert的使用

6、判断是哪个平台

7、常用组件解释

二、使用Mobx存放全局数据

安装依赖：

找到babel.config.js文件添加如下配置：

新建mobx目录，新建index.js文件：

组件中的使用：

动态修改数据

三、react-navigation搭建路由

1、安装使用

2、Stack导航

3、BottomTab导航

4、Drawer导航

5、MaterialTopTab导航

6、路由嵌套

7、路由传参

四、图标库的使用

1、安装依赖

2、将如下代码贴到，android/app/build.gradle文件最后，路径不能错！

3、选择你中意的图标

五、ReactNative架构

1、现有架构

2、新架构

ReactNative官方文档：

React Native 中文网 · 使用React来编写原生应用的框架

ReactNative适用于APP的一套多开，适合大型项目的开发，安装环境时注意版本对应。

一、基本使用

1、创建项目

npx react-native init myPro

2、ReactNative的布局默认为flex布局，View标签不能直接写入文字，样式不会被继承, 单位不能加px,vh,vw等可以是百分比。

3、快速获取屏幕尺寸，Dimensions

flex布局见我的博客：Flex布局总结_Dragon Wu的博客-CSDN博客_flex布局总结

案例代码：同样使用React的JSX的写法，但标签需要使用RN的标签

import React from "react"

import { View, Text, Dimensions } from "react-native"

// 获取屏幕宽高

const screenWidth = Math.round(Dimensions.get("window").width)

const screenHeight = Math.round(Dimensions.get("window").height)

/*

1 在rn中默认容器 布局方式 都是flex布局

2 方向 flex-direction:column;

3 rn中样式不会被继承

4 单位

(1)不用加px

(2)不用加vw vh

(3)可以加 百分比 ”50%“

*/

const Index = () => (

backgroundColor: "aqua",

flex: 1,

flexDirection: "row",

color: "red",

fontSize: 50,

width: "50%"

}}>

JSX

JSX

屏幕尺寸的一半

)

export default Index

效果如图。

4、StyleSheet的使用

5、Alert的使用

import React, { Component } from "react"

import { Alert, Button, View, StyleSheet } from "react-native"

class App extends Component {

createTwoButtonAlert = () => {

Alert.alert(

"警告标题",

"警告内容",

[

{

text: "取消",

onPress: () => console.log("Cancel"),

style: "cancel"

},

{

text: "确认",

onPress: () => console.log("OK"),

style: "default"

}

]

)

}

render () {

return (

color={"red"}

onPress={() => {

alert("我是一个按钮")

}} />

{

Alert.alert("我是一个按钮")

}}

color={"blue"}

/>

onPress={this.createTwoButtonAlert}

color={"green"} />

)

}

}

export default App

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: "space-around",

alignItems: "center"

}

})

alert如下：

 Alert.alert效果如下：

 Alert.alert的选择用法：

6、判断是哪个平台

7、常用组件解释

组件名作用StatusBar可以用于修改手机顶部状态栏的显示，hidden=true时隐藏状态栏Siwtch用于控件状态ActivityIndicator加载时的圆形加载条Touchable点击时有样式改变效果，类似于按钮ScrollView可滚动的视图，View是不能滚动的，但这个可以。可设置水平滚动或垂直滚动。可作为导航栏。SafeAreaView可以保证视图存于合理的视图区域，可避免某些手机刘海屏对视图的遮挡SetionList可以进行分组的列表FlatList支持水平布局的列表

 第三方组件需要先下载依赖才能使用。

二、使用Mobx存放全局数据

大型项目建议使用Redux

官方文档：2. API概览 · MobX 中文文档

安装依赖：

yarn add mobx mobx-react @babel/plugin-proposal-decorators

找到babel.config.js文件添加如下配置：

module.exports = {

plugins: [

["@babel/plugin-proposal-decorators", { "legacy": true }]

]

}

新建mobx目录，新建index.js文件：

import {observable} from "mobx"

class RootStore{

//es7的装饰器语法 Object.defineProperty

@observable

name="悟空"

}

export default new RootStore()

组件中的使用：

 父组件传入全局变量：

import React, { Component } from "react"

import { View, Text } from "react-native"

import RootStore from "./mobx"

import { Provider } from "mobx-react"

import Btn from "./component/Btn"

class Index extends Component {

render () {

return (

这

{/* 里面的组件可以拿到全局数据*/}

)

}

}

export default Index

子组件接收全局变量：

import React, { Component } from "react"

import {View,Text} from "react-native"

import { inject } from "mobx-react"

@inject("RootStore")

class Btn extends Component {

render () {

return (

Btn:{this.props.RootStore.name}

)

}

}

export default Btn

效果：获取到全局变量的数据

动态修改数据

点击以后动态变换：这里注意高版本的mobx需要使用makeObservable才能实现页面的动态渲染。

三、react-navigation搭建路由

yarn add @react-navigation/native@^5.x

官方文档：https://reactnavigation.org/docs/getting-started

这里的案例为稳定版本：5.x

1、安装使用

参考:

https://reactnavigation.org/docs/5.x/getting-started

下载依赖：

yarn add @react-navigation/native@^5.x

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

注意5.x版本使用前要在入口文件index.js或app.js引入如下：

import 'react-native-gesture-handler';

2、Stack导航

安装依赖：

yarn add @react-navigation/stack@^5.x

参考：

https://reactnavigation.org/docs/5.x/hello-react-navigation

案例代码：

import { createNativeStackNavigator } from "react-native-screens/native-stack"

import { NavigationContainer } from "@react-navigation/native"

import { Button, Text, TouchableOpacity } from "react-native"

import * as React from "react"

function HomeScreen (prop) {

return (

prop.navigation.navigate("About")} />)

}

function AboutScreen ({ navigation }) {

return (

navigation.navigate("Home")} />)

}

const Stack = createNativeStackNavigator()

function App () {

return (

options={{

title: "首页",

headerStyle: {

backgroundColor: "tomato"

},

headerRight: () => (

alert("hello")}>

hello

)

}}

name="Home" component={HomeScreen} />

)

}

export default App

效果：

 

3、BottomTab导航

安装依赖：

yarn add @react-navigation/bottom-tabs@^5.x

 参考：

https://reactnavigation.org/docs/5.x/tab-based-navigation

导航栏使用方法基本相同，先添加依赖，之后导入navigator生成器，进行路由。 

基本实现：

import * as React from 'react';

import { Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {

return (

Home!

);

}

function SettingsScreen() {

return (

Settings!

);

}

const Tab = createBottomTabNavigator();

export default function App() {

return (

);

}

效果：

需要看图标使用的见 （四、图标库的使用）

4、Drawer导航

使用与前两种类似：

首先，添加依赖：

yarn add @react-navigation/drawer@^5.x

参考：

https://reactnavigation.org/docs/5.x/drawer-based-navigation

 

 

参考：https://reactnavigation.org/docs/5.x/drawer-navigator 

案例代码：

import * as React from "react"

import { Button, View } from "react-native"

import { createDrawerNavigator } from "@react-navigation/drawer"

import { NavigationContainer } from "@react-navigation/native"

function HomeScreen ({ navigation }) {

return (

onPress={() => navigation.navigate("Notifications")}

title="Go to notifications"

/>

)

}

function NotificationsScreen ({ navigation }) {

return (

navigation.navigate("Home")} title="Go back home" />

)

}

const Drawer = createDrawerNavigator()

export default function App () {

return (

)

}

效果截图：

 注，若启动或按键有问题，试试清清缓存，也可以参考这个：

Installation | React Native Reanimated

重新启动一般就可以刷新了。

 5、MaterialTopTab导航

参考：https://reactnavigation.org/docs/5.x/material-top-tab-navigator

添加依赖：

yarn add @react-navigation/material-top-tabs@^5.x react-native-tab-view@^2.x

案例代码：相比于TabView多了一个滑动切换功能。

import * as React from "react"

import { Text, View } from "react-native"

import { NavigationContainer } from "@react-navigation/native"

import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"

function HomeScreen () {

return (

Home!

)

}

function SettingsScreen () {

return (

Settings!

)

}

const Tab = createMaterialTopTabNavigator()

export default function App () {

return (

)

}

效果：

 注意，使用时可能因为

react-native-reanimated

报错！

解决方法见：Installation | React Native Reanimated

6、路由嵌套

参考：https://reactnavigation.org/docs/5.x/nesting-navigators

案例代码：

// In App.js in a new project

import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"

import { Text, View } from "react-native"

function Feed(prop){

return (

Feed

)

}

function Messages(prop){

return (

Messages

)

}

function HomeScreen() {

const Tab=createBottomTabNavigator()

return (

);

}

const Stack = createStackNavigator();

function App() {

return (

);

}

export default App;

效果：

 7、路由传参

 参考：https://reactnavigation.org/docs/5.x/params

案例代码：

import * as React from 'react';

import { Button, Text, View } from "react-native"

import { NavigationContainer } from '@react-navigation/native'

import { createStackNavigator } from "@react-navigation/stack"

function HomeScreen({ navigation }) {

return (

Home Screen

title="Go to Details"

onPress={() => {

/* 1. Navigate to the Details route with params */

navigation.navigate('Details', {

itemId: 86,

otherParam: 'anything you want here',

});

}}

/>

);

}

function DetailsScreen({ route, navigation }) {

/* 2. Get the param */

const { itemId, otherParam } = route.params;

return (

Details Screen

itemId: {JSON.stringify(itemId)}

otherParam: {JSON.stringify(otherParam)}

title="Go to Details... again"

onPress={() =>

navigation.push('Details', {

itemId: Math.floor(Math.random() * 100),

})

}

/>

navigation.navigate('Home')} />

navigation.goBack()} />

);

}

const Stack = createStackNavigator();

export default function App() {

return (

);

}

效果：

四、图标库的使用

图标仓库链接：GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling.

Ios见上面仓库链接

1、安装依赖

yarn add react-native-vector-icons

 以下为Android环境演示：

2、将如下代码贴到，android/app/build.gradle文件最后，路径不能错！

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

3、选择你中意的图标

可以是这个：Ionicons: Premium Open Source Icon Pack for Ionic Framework

 引入对应的依赖：

import Ionicons from 'react-native-vector-icons/Ionicons';

Tab路由的使用案例：

import * as React from 'react';

import { Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Ionicons from 'react-native-vector-icons/Ionicons';

function HomeScreen() {

return (

Home!

);

}

function SettingsScreen() {

return (

Settings!

);

}

const Tab = createBottomTabNavigator();

export default function App() {

return (

screenOptions={({ route }) => ({

tabBarIcon: ({ focused, color, size }) => {

let iconName;

if (route.name === 'Home') {

iconName = focused

? 'ios-information-circle'

: 'ios-information-circle-outline';

} else if (route.name === 'Settings') {

iconName = focused ? 'ios-list-box' : 'ios-list';

}

// You can return any component that you like here!

return ;

},

})}

tabBarOptions={{

activeTintColor: 'tomato',

inactiveTintColor: 'gray',

}}

>

);

}

效果：

五、ReactNative架构

1、现有架构

 2、新架构

总结到此，后续补充。

相关文章

评论可见，请评论后查看内容，谢谢！！！

 您阅读本篇文章共花了：