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

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

Props 属性

State 状态


Props 属性

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

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

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

    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;
  • 启动项目

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

    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 可以直接解构出来,例如:

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

State 状态

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

  转载请注明:

文章作者: Diviner
文章链接: http://www.diviner.site/archives/deff105d.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Divinerの博客 !

评论
 上一篇
ReactNative样式及宽度和高度 ReactNative样式及宽度和高度
【基础篇】ReactNative 样式及宽度和高度ReactNative 中的样式 ReactNative 中的高度与宽度 ReactNative 中的样式 ReactNative 中的样式与CSS样式基本一致, 只是写法上有所区别而
下一篇 
ReactNative开发环境搭建 ReactNative开发环境搭建
【基础篇】ReactNative 开发环境搭建及第一个程序运行公共基础环境搭建 IOS 开发环境搭建 Android 开发环境搭建 第一个 ReactNative 项目 公共基础环境搭建 安装 Node 和 Watchman Node
  目录