ReactNative 学习总结个人梳理


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 = () => (
    <View style={{
        backgroundColor: "aqua",
        flex: 1,
        flexDirection: "row",
        color: "red",
        fontSize: 50,
        width: "50%"
    }}>
        <Text>JSXText>
        <Text style={{ color: "yellow", fontSize: 100 }}>JSXText>
        <View style={{ width: screenWidth / 2, height: screenHeight / 2, backgroundColor: "yellow" }}><Text>屏幕尺寸的一半Text>View>
    View>
)
 
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 (
            <View style={[styles.container]}>
                <Button title="alert"
                        color={"red"}
                        onPress={() => {
                            alert("我是一个按钮")
                        }} />
                
                <Button title={"Alert.alert"} onPress={() => {
                    Alert.alert("我是一个按钮")
                }}
                        color={"blue"}
                />
                
                <Button title={"两个按钮"}
                        onPress={this.createTwoButtonAlert}
                        color={"green"} />
            View>
        )
    }
}
 
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 (
            <View>
                <Text>这Text>
                <Provider RootStore={RootStore}>
                    {/* 里面的组件可以拿到全局数据*/}
                    <Btn/>
                Provider>
            View>
        )
    }
}
 
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 (
            <View>
                <Text>Btn:{this.props.RootStore.name}Text>
            View>
        )
    }
}
 
export default Btn

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

动态修改数据

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

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 (<Button title={"跳转到详情页"} onPress={() => prop.navigation.navigate("About")} />)
}
 
function AboutScreen ({ navigation }) {
    return (<Button title={"跳转到主页"} onPress={() => navigation.navigate("Home")} />)
}
 
const Stack = createNativeStackNavigator()
 
function App () {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    options={{
                        title: "首页",
                        headerStyle: {
                            backgroundColor: "tomato"
                        },
                        headerRight: () => (
                            <TouchableOpacity onPress={() => alert("hello")}>
                                <Text>helloText>
                            TouchableOpacity>
                        )
                    }}
                    name="Home" component={HomeScreen} />
                <Stack.Screen name="About" component={AboutScreen} />
            Stack.Navigator>
        NavigationContainer>
    
    )
}
 
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 (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!Text>
    View>
  );
}
 
function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!Text>
    View>
  );
}
 
const Tab = createBottomTabNavigator();
 
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      Tab.Navigator>
    NavigationContainer>
  );
}

效果：

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

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 (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <Button
                onPress={() => navigation.navigate("Notifications")}
                title="Go to notifications"
            />
        View>
    )
}
 
function NotificationsScreen ({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <Button onPress={() => navigation.navigate("Home")} title="Go back home" />
        View>
    )
}
 
const Drawer = createDrawerNavigator()
 
export default function App () {
    return (
        <NavigationContainer>
            <Drawer.Navigator>
                <Drawer.Screen name="Home" component={HomeScreen} />
                <Drawer.Screen name="Notifications" component={NotificationsScreen} />
            Drawer.Navigator>
        NavigationContainer>
    )
}

效果截图：

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

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 (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Home!Text>
        View>
    )
}
 
function SettingsScreen () {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Settings!Text>
        View>
    )
}
 
const Tab = createMaterialTopTabNavigator()
 
export default function App () {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Home" component={HomeScreen} />
                <Tab.Screen name="Settings" component={SettingsScreen} />
            Tab.Navigator>
        NavigationContainer>
    )
}

效果：

注意，使用时可能因为

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 (
        <View>
            <Text>FeedText>
        View>
    )
}
 
function Messages(prop){
    return (
        <View>
            <Text>MessagesText>
        View>
    )
}
 
function HomeScreen() {
    const Tab=createBottomTabNavigator()
    return (
        <Tab.Navigator>
            <Tab.Screen name="Feed" component={Feed} />
            <Tab.Screen name="Messages" component={Messages} />
        Tab.Navigator>
    );
}
 
const Stack = createStackNavigator();
 
function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            Stack.Navigator>
        NavigationContainer>
    );
}
 
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 (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home ScreenText>
            <Button
                title="Go to Details"
                onPress={() => {
                    /* 1. Navigate to the Details route with params */
                    navigation.navigate('Details', {
                        itemId: 86,
                        otherParam: 'anything you want here',
                    });
                }}
            />
        View>
    );
}
 
function DetailsScreen({ route, navigation }) {
    /* 2. Get the param */
    const { itemId, otherParam } = route.params;
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details ScreenText>
            <Text>itemId: {JSON.stringify(itemId)}Text>
            <Text>otherParam: {JSON.stringify(otherParam)}Text>
            <Button
                title="Go to Details... again"
                onPress={() =>
                    navigation.push('Details', {
                        itemId: Math.floor(Math.random() * 100),
                    })
                }
            />
            <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
            <Button title="Go back" onPress={() => navigation.goBack()} />
        View>
    );
}
 
const Stack = createStackNavigator();
 
export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Details" component={DetailsScreen} />
            Stack.Navigator>
        NavigationContainer>
    );
}

效果：

四、图标库的使用

图标仓库链接：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 (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home!Text>
        View>
    );
}
 
function SettingsScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings!Text>
        View>
    );
}
 
const Tab = createBottomTabNavigator();
 
export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                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 <Ionicons name={iconName} size={size} color={color} />;
                    },
                })}
                tabBarOptions={{
                    activeTintColor: 'tomato',
                    inactiveTintColor: 'gray',
                }}
            >
                <Tab.Screen name="Home" component={HomeScreen} />
                <Tab.Screen name="Settings" component={SettingsScreen} />
            Tab.Navigator>
        NavigationContainer>
    );
}

效果：

五、ReactNative架构

1、现有架构

2、新架构

总结到此，后续补充。

相关阅读:
SEO与社交媒体的关系
 2023年天津市大学软件学院高职升本科联合招生专业考试大纲
 一次对requirements环境的配置
 算法--判断矩阵经轮转后是否一致
 线上线程池配置错误导致服务故障
 经典算法之直接插入排序(DirectInsert Sort)
蛋白组学治疗时点及不同治疗方式疗效差异比较
 String的深入认识
 PoE交换机出现不稳定的原因有哪些？
c++ mutable
原文地址：https://blog.csdn.net/qq_50909707/article/details/127788413

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 学习总结个人梳理