react navigation学习

朱雀 2022-03-20 11:10 208阅读 0赞

react native导航器

*  学习网址：[https://reactnavigation.org/docs/zh-Hans/getting-started.html][https_reactnavigation.org_docs_zh-Hans_getting-started.html]
 *  图标库地址：[https://oblador.github.io/react-native-vector-icons/][https_oblador.github.io_react-native-vector-icons]
 *  遇到的问题：

underfined is not an object (evaluating 'RNGestureHandlerModule.State')

null is not an object (evaluating 'RNGestureHandlerModule.State')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]    或者       ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

1.     delete node\_modules and package-lock.json  
2.     npm install  
3.     npm install --save react-navigation  
4.     npm install --save react-native-gesture-handler  
5.     react-native link

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

解决办法如链接：[https://stackoverflow.com/questions/53367195/invariant-violation-the-navigation-prop-is-missing-for-this-navigator][https_stackoverflow.com_questions_53367195_invariant-violation-the-navigation-prop-is-missing-for-this-navigator]

*  demo1:创建一个 stack navigator

效果图如右图所示![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]点击按钮go Details Screen后跳转新页面![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4][]

项目文件夹如右图所示：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5][]

1.新建一个文件夹src，在src内新建config和screens文件夹，config内新建route.js文件用来放置配置代码，screens内放置页面代码

App.js

import React, { Component } from 'react';
    import Route from './src/config/route'
    class App extends Component {
      render() {
        return (
          <Route />
        );
      }
    }
    export default App

route.js

Home.js

import React, { Component } from 'react';
    import { View, Text, Button } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }
    }
    class Home extends Component {
      static navigationOptions = {
        // 设置 title
        title: "首页"
      };
      render() {
        return (
          <View style={styles.container}>
            <Text>Home Screen</Text>
            <Button
              title="go Details Screen"
              // 路由跳转
              onPress={() => this.props.navigation.push("Details")}
            />
          </View>
        );
      }
    }
    export default Home

Details.js

import React, { Component } from 'react';
    import { View, Text, Button } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }
    }
    class Details extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Details Screen</Text>
            <Button
              title="Go to Home"
              onPress={() => this.props.navigation.navigate('Home')}
            />
            <Button
              title="Go back"
              onPress={() => this.props.navigation.goBack()}
            />
          </View>
        );
      }
    }
    export default Details

由上面的代码可知：

如果你处在堆栈深处，上面有多个页面，此时你想要将上面所有的页面都销毁，并返回第一个页面。 在这种情况下，要回到\` Home \`，可以使用\` navigate('Home') \`（而不是\` push \`！ 尝试一下，看看有什么不同）。 另一个选择是\` navigation.popToTop() \`，它可以返回到堆栈中的第一个页面。

每次调用 \` push \` 时, 我们会向导航堆栈中添加新路由。 当你调用 \` navigate \` 时, 它首先尝试查找具有该名称的现有路由, 并且只有在堆栈上没有一个新路由时才会推送该路由。

this.props.navigation.goBack()实现返回

*  将上述代码在android上运行时，遇到如下问题Could not connect to development server

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6][]

解决方法，利用Android Studio打开当前项目的MainActivity.java文件，进行如下修改

在合适位置加上下面两段代码：

import com.facebook.react.ReactActivityDelegate;
    import com.facebook.react.ReactRootView;
    import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

@Override
        protected ReactActivityDelegate createReactActivityDelegate() {
            return new ReactActivityDelegate(this, getMainComponentName()) {
                @Override
                protected ReactRootView createRootView() {
                   return new RNGestureHandlerEnabledRootView(MainActivity.this);
                }
             };
        }

完整代码示例

package com.awesomeproject;
    
    import com.facebook.react.ReactActivity;
    import com.facebook.react.ReactActivityDelegate;
    import com.facebook.react.ReactRootView;
    import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
    public class MainActivity extends ReactActivity {
    
        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */
        @Override
        protected String getMainComponentName() {
            return "AwesomeProject";
        }
        @Override
        protected ReactActivityDelegate createReactActivityDelegate() {
            return new ReactActivityDelegate(this, getMainComponentName()) {
                @Override
                protected ReactRootView createRootView() {
                   return new RNGestureHandlerEnabledRootView(MainActivity.this);
                }
             };
        }
    }

上述问题成功解决![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7][]

*  demo2传递参数给路由

1.在路由中传递

=> this.props.navigation.navigate("Details",{
                itemId: 86,
                otherParam: 'anything you want here'

2.接受路由的两种方法

const itemId = this.props.navigation.getParam('itemId', 'NO-ID');

const otherParam = this.props.navigation.state.params.otherParam;

3.1设置标题栏显示的标题

页面组件navigationOptions，title这个属性用于设置标题栏的标题

3.2在标题中使用参数  
在navigationOptions中使用this.props会报错，应该用\{navigation> navigationOptions，screenProps\}的对象调用它，再通过<code> navigation.state.params从navigation中获取参数

3.3使用setParams更新navigationOptions

<Button

title="Update the title"

onPress=\{() => this.props.navigation.setParams(\{title:'使用setParams更新navigationOptions'\})\}

3.4调整标题样式  
定制标题样式时有三个关键属性：headerStyle、headerTintColor和headerTitleStyle。

headerStyle：一个应用于 header 的最外层 View 的 样式对象， 如果你设置 backgroundColor ，他就是header 的颜色。  
headerTintColor：返回按钮和标题都使用这个属性作为它们的颜色。   
headerTitleStyle：如果我们想为标题定制fontFamily，fontWeight和其他Text样式属性，我们可以用它来完成。

如下所示，在某个页面可以实现对title的样式设定

static navigationOptions = {
        // 设置 title
        title: "首页",
        headerStyle: {
          backgroundColor:'#010101',
        },
        headerTintColor:'#fff',
        headerTintStyle:{
          fontWeight:'bold'
        }
      };

3.5跨页面共享通用的navigationOptions

设置每一个页面的title，只需要在配置文件route.js中设置

const AppNavigator = createStackNavigator({
        Home: Home,
        Details: Details
      },
      {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        },
      }
    );

4.完整代码(App.js如上所示，就不粘贴)

route.js

import { createStackNavigator,createAppContainer } from "react-navigation";
    import React from 'react';
    // 引入页面组件
    import Home from '../screens/Home'
    import Details from '../screens/Details'
    // 配置路由
    const AppNavigator = createStackNavigator({
        Home: Home,
        Details: Details
      },
      {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        },
        // navigationOptions: {
        //   tabBarLabel: 'Home!',
        // },
      }
    );
    const Route = createAppContainer(AppNavigator);
    export default Route;

home页面内的组件：child.js路由跳转，props需要由父组件传入

import React, { Component } from 'react';
    import { View, Text } from 'react-native';
    import Ionicons from 'react-native-vector-icons/Ionicons';
    class CityScreen extends Component {
      static navigationOptions = ({ navigation }) => {
        return {
          title: "选择城市",
          headerStyle: {
              backgroundColor:'#e75404'
          },
          headerTintColor:'white'
        }
      };
      render() {
        return (
          <View>
            <Text>home页面内的组件</Text>
            <Ionicons name='ios-add' size={26}  style={WeatherInfoStyle.add_icon}  
              onPress={() => this.props.navigation.navigate("Details",{
                 itemId: 86
              })}/>
          </View>
        );
      }
    }
    export default CityScreen

Home.js

import React, { Component } from 'react';
    import { View, Text, Button, Image } from 'react-native';
    import Child from "./child"
    class LogoTitle extends Component {
      render() {
        return (
          <View style={
       {flexDirection: 'row',justifyContent: 'flex-start',alignItems: 'flex-start'}}>
            <Image source={require('../img/preview.jpg')} 
              style={
       { width: 30, height: 30 }} />
          </View>
        );
      }
    }
    class Home extends Component {
      static navigationOptions = {
        // 设置 title
        // title: "首页",
        headerTitle: "首页",
        headerLeft: <LogoTitle />,
        headerRight: (
          <Button
            onPress={() => alert('This is a button!')}
            title="Info"
            color="#fff"
          />
        ),
        // 设置 title 样式
        // headerStyle: {
        //   backgroundColor:'#010101',
        // },
        // headerTintColor:'#fff',
        // headerTintStyle:{
        //   fontWeight:'bold'
        // }
      };
      render() {
        return (
          <View>
            <Text>Home Screen</Text>
            <Button
              title="go Details Screen"
              // 路由跳转
              onPress={() => this.props.navigation.navigate("Details",{
                itemId: 86,
                title: 'Detail Page',
                otherParam: 'other'
              })}
            />
            <Child  {...this.props}/>
          </View>
        );
      }
    }
    export default Home

Details.js

import React, { Component } from 'react';
    import { View, Text, Button } from 'react-native';
    class Details extends Component {
      static navigationOptions = ({ navigation }) => {
        return {
          // 在标题中使用参数
          // title: navigation.getParam('title', 'Details Screen title'),
          title: navigation.state.params.title,
          headerRight: (
            <Button
              onPress={() =>navigation.goBack()}
              title="return home"
              color="#fff"
            />
          ),
        }
      };
      render() {
        const itemId = this.props.navigation.getParam('itemId', 'NO-ID');
        const otherParam = this.props.navigation.state.params.otherParam;
        return (
          <View>
            <Text>Details Screen</Text>
            <Button
              title="Go to Home"
              onPress={() => this.props.navigation.navigate('Home')}
            />
            <Button
              title="Go back"
              onPress={() => this.props.navigation.goBack()}
            />
            <Button
              title="Update the title"
              onPress={() => this.props.navigation.setParams({title:'使用setParams更新navigationOptions'})}
            />
            <Text>查看传参-----itemId：{itemId},otherParam:{otherParam}</Text>
          </View>
        );
      }
    }
    export default Details

*  demo3创建一个Tab navigation，文件结构如demo1

一、createBottomTabNavigator

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8][]

1.route.js

import { createBottomTabNavigator,createAppContainer } from 'react-navigation';
    import React from 'react';
    import Tabnavigation1 from '../screens/Tabnavigation1'
    import Tabnavigation2 from '../screens/Tabnavigation2'
    // 配置路由
    const AppNavigator = createBottomTabNavigator({
        Tab1: Tabnavigation1,
        Tab2: Tabnavigation2
      }
    );
    const TabRoute = createAppContainer(AppNavigator);
    export default TabRoute;

Tabnavigation1，Tabnavigation2目前代码类似，最简单的显示

import React, { Component } from 'react';
    import { View, Text } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }
    }
    class Tabnavigation1 extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Tabnavigation1</Text>
          </View>
        );
      }
    }
    export default Tabnavigation1

二、自定义样式

图标库地址：[https://oblador.github.io/react-native-vector-icons/][https_oblador.github.io_react-native-vector-icons]

出现报错：Warning: Failed prop type: Invalid prop \`name\` of value \`ios-home-outline\` supplied to \`Icon\`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 9][]

因为ios-home-outline，ios-person-outline图标不包括在图标库内

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 10][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 11][]

1.route.js

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
    import Tabnavigation1 from '../screens/Tabnavigation1'
    import Tabnavigation2 from '../screens/Tabnavigation2'
    import Ionicons from 'react-native-vector-icons/Ionicons';
    import React from 'react';
    // 配置路由
    const AppNavigator = createBottomTabNavigator(
        {
            Tab1: {
                screen: Tabnavigation1,
                navigationOptions: {
                    tabBarLabel: "Home Page",
                    tabBarIcon: ({ tintColor, focused }) => (
                        <Ionicons
                            name={focused ? 'ios-home' : 'ios-open'}
                            size={26}
                            style={
       { color: tintColor }}
                        />
                    ),
                },
            },
            Tab2: {
                screen: Tabnavigation2,
                navigationOptions: {
                    tabBarLabel: 'Profile',
                    tabBarIcon: ({ tintColor, focused }) => (
                        <Ionicons
                            name={focused ? 'ios-person' : 'ios-options'}
                            size={26}
                            style={
       { color: tintColor }}
                        />
                    ),
                },
            },
        },
        {
            tabBarOptions: {
                // activeTintColor: '#e91e63',
                labelStyle: {
                    fontSize: 12,
                },
                // style: {
                //     backgroundColor: 'blue',
                // },
                headerTitle: {
                    fontSize: '20',
                    color: 'white',
                    fontWeight: '500'
                },
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray',
            }
        }
    );
    const TabRoute = createAppContainer(AppNavigator);
    export default TabRoute;

Tabnavigation1，Tabnavigation2如上所示

*  demo4创建一个Drawer navigation，文件结构如demo1

一、createBottomTabNavigator

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 12][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 13][]

1.route.js

import { createDrawerNavigator,createAppContainer } from 'react-navigation';
    import Drawer1 from '../screens/Drawer1'
    import Drawer2 from '../screens/Drawer2'
    // 配置路由
    const AppNavigator = createDrawerNavigator({
        Drawer1: Drawer1,
        Drawer2: Drawer2
      }
    );
    const DrawerRoute = createAppContainer(AppNavigator);
    export default DrawerRoute;

Drawer1，Drawer2目前代码类似，最简单的显示

import React, { Component } from 'react';
    import { View, Text, Button } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }
    }
    class Drawer1 extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Drawer1</Text>
            <Button
              title="openDrawer"
              onPress={() => this.props.navigation.openDrawer()}
            />
             <Button
              title="closeDrawer"
              onPress={() => this.props.navigation.closeDrawer()}
            />
          </View>
        );
      }
    }
    export default Drawer1

*  demo5创建一个简单的StackNavigator和BottomTabNavigator结合体，文件结构如demo1，其他相关文件见demo1和demo3

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 14][]

route.js

import { createBottomTabNavigator, createStackNavigator, createAppContainer } from "react-navigation";
    import React from 'react';
    // 引入页面组件
    import Home from '../screens/home/Home'
    import Details from '../screens/Details'
    import Tabnavigation1 from '../screens/tab1/Tabnavigation1'
    import Tabnavigation2 from '../screens/tab2/Tabnavigation2'
    import Tabnavigation3 from '../screens/tab3/Tabnavigation3'
    import Ionicons from 'react-native-vector-icons/Ionicons';
    // 配置路由
    const HomeStack = createStackNavigator({
      Home: Home,
      Details: Details
    },
      {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const Tab1Stack = createStackNavigator({
      Tabnavigation1: Tabnavigation1
    },
      {
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const Tab2Stack = createStackNavigator({
      Tabnavigation2: Tabnavigation2
    },
      {
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const Tab3Stack = createStackNavigator({
      Tabnavigation3: Tabnavigation3
    },
      {
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const AppNavigator = createBottomTabNavigator(
      {
        HomeStack: {
          screen: HomeStack,
          navigationOptions: {
            tabBarLabel: "Alisa",
            tabBarIcon: ({ tintColor, focused }) => (
              <Ionicons
                name={focused ? 'ios-chatbubbles' : 'ios-home'}
                size={26}
                style={
       { color: tintColor }}
              />
            ),
          },
        },
        Tab1Stack: {
          screen: Tab1Stack,
          navigationOptions: {
            tabBarLabel: '通讯录',
            tabBarIcon: ({ tintColor }) => (
              <Ionicons
                name='ios-people'
                size={26}
                style={
       { color: tintColor }}
              />
            ),
          },
        },
        Tab2Stack: {
          screen: Tab2Stack,
          navigationOptions: {
            tabBarLabel: '发现',
            tabBarIcon: ({ tintColor }) => (
              <Ionicons
                name='ios-navigate'
                size={26}
                style={
       { color: tintColor }}
              />
            ),
          },
        },
        Tab3Stack: {
          screen: Tab3Stack,
          navigationOptions: {
            tabBarLabel: '我',
            tabBarIcon: ({ tintColor }) => (
              <Ionicons
                name='ios-person'
                size={26}
                style={
       { color: tintColor }}
              />
            ),
          },
        },
      },
      {
        tabBarOptions: {
          labelStyle: {
            fontSize: 12,
          },
          headerTitle: {
            fontSize: '20',
            color: 'white',
            fontWeight: '500'
          },
          activeTintColor: '#4dbe2d',
          inactiveTintColor: 'gray',
        }
      }
    );
    const Route = createAppContainer(AppNavigator);
    export default Route;

*  后期可以看看react-native-router-flux

这个博客链接不错：[https://www.jianshu.com/p/37428d579cf6][https_www.jianshu.com_p_37428d579cf6]

[https_reactnavigation.org_docs_zh-Hans_getting-started.html]: https://reactnavigation.org/docs/zh-Hans/getting-started.html
[https_oblador.github.io_react-native-vector-icons]: https://oblador.github.io/react-native-vector-icons/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190212155822342.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220320/1feba0c24b4d4a23a7f48c3084aeef34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220320/87690b717af946209bf53536e05eea0f.png
[https_stackoverflow.com_questions_53367195_invariant-violation-the-navigation-prop-is-missing-for-this-navigator]: https://stackoverflow.com/questions/53367195/invariant-violation-the-navigation-prop-is-missing-for-this-navigator
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190212162319674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4]: /images/20220320/13ec9bb4a474448d8a126a10f1ad8b01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5]: /images/20220320/022e800a9b224bf6853aa499c780b861.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6]: /images/20220320/753bddc28b6f4738a60645c3b6c40b23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7]: /images/20220320/3eae65e4158f45cca254f83b7757c0dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8]: /images/20220320/1b13db58e4a5449faba1c03f377fcd0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 9]: /images/20220320/cde9faeaf9994e9fb2cece1d652f569b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20190226155319745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 11]: /images/20220320/69091769dbbf4437b1f1970f8019045e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20190225125752490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 13]: /images/20220320/5899c058a86a4d3fab4a2d58efd854b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 14]: /images/20220320/8c0ad3d51eeb4f91ba91140c16fe0554.png
[https_www.jianshu.com_p_37428d579cf6]: https://www.jianshu.com/p/37428d579cf6