ReactNative属性(props)和状态(state)

  |     |   本文总阅读量:

【基础篇】ReactNative 属性(props)和状态(state)

Props 属性

State 状态


Props 属性

通常情况下, 我们创建一个组件时回定制我们需要的参数,而这些参数就称为属性(Props)
接下来,我们使用 <Image /> 组件为例展示下 Props 的用法

  • 创建一个新项目, 并在目录下创建一个 components 文件夹,以后所有的示例都放在此文件夹下

    1
    2
    3
    npx react-native init ProjectName
    cd ProjectName/
    mkdir components
  • 使用自己喜欢的代码编辑器打开项目(例如:VSCode),然后在 components/PropsDemo 下创建 index.js 文件,写入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React from 'react';
    import {Image} from 'react-native';

    const PropsDemo = ({}) => {
    const image = {
    uri:
    'https://cn.bing.com/th?id=OIP.Yuqdaej3uRKuVcNGjK3ziwHaEK&pid=Api&rs=1',
    };
    return <Image source={image} style={{width: 300, height: 400}} />;
    };

    export default PropsDemo;
  • 启动项目

    1
    2
    yarn start
    yarn ios
  • 修改 App.js 中的代码如下, 保存可以看到图片加载出来了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import React from "react";
    import { SafeAreaView, StatusBar } from "react-native";
    import PropsDemo from "./components/PropsDemo";

    const App: () => React$Node = () => {
    return (
    <>
    <StatusBar barStyle="dark-content" />
    <SafeAreaView>
    <PropsDemo />
    </SafeAreaView>
    </>
    );
    };

    export default App;
  • 在编写类组件时, 属性props 可以通过 this.props.xxx 来获取

  • 在编写函数组件时, 属性props 可以直接解构出来,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    const SayHello = ({ name }) => {

    return (
    <View style={{marginTop: 30}}>
    <Text>Hello {name}</Text>
    </View>
    );
    };
  • 到这里为止, 我们已经对 props 属性有所了解,并且在编写示例是, 我们对一些常用组件也有了简单的了解,比如:ViewTextImage; 我们可以通过这些组件写一些简单的例子,大家自己多动手练习吧

State 状态

  • state是类组件特有的数据存储对象,它存储的数据可以通过 setState() 方法进行修改;当我们每次调用此方法时,render 函数就会重新渲染页面
  • ReactNative 与 React的概念基本是一致的,它们都可以使用 props 进行父子组件之间的数据传递,类组件的自身数据使用 state 存储
  • 页面的变化是根据数据来驱动的

赏作者一颗糖吧, 您的支持将鼓励我继续创作!



文章目录
  1. 1. 【基础篇】ReactNative 属性(props)和状态(state)
    1. 1.0.1. Props 属性
    2. 1.0.2. State 状态
您是第 位小伙伴 | 本站总访问量 | 已经写了 18.8k 字啦

载入天数...载入时分秒...