React Native 中的 props 是什么？

道具用于为组件提供属性，使用这些属性可以修改和自定义它们。这些属性在创建组件时传递给组件。道具用于用户定义和默认组件中以扩展其功能。这些 props 是不可变的，并且在创建组件后无法更改。

    // Remaining application code



     // Remaining application code

组件的 props 值用大括号括起来，以便将表达式嵌入 JSX。

示例 1：默认组件中的道具：在此，我们将看到默认情况下我们可以使用的组件中道具的使用。

创建 React Native 应用程序：

• 第 1 步：使用以下命令创建 React Native 应用程序：

  expo init PropsDefaultDemo

• 第 2 步：创建项目文件夹后，即 PropsDefaultDemo ，使用以下命令移动到该文件夹：

  cd PropsDefaultDemo

项目结构：它看起来像这样。

实现：在App.js中写下如下代码，展示 Props 的功能。在这里，我们将展示几个视图，每个视图都有不同的属性。

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
  
// Exporting default component
export default function App() {
  return (
    
      
      
      
      
    
  );
}
  
// Creating styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  style1:{
    backgroundColor: "red",
    height: 100,
    width: 200
  },
  style2:{
    backgroundColor: "green",
    height: 50,
    width: 50
  },
  style3:{
    backgroundColor: "blue",
    height: 100,
    width: 100
  }
});

运行应用程序的步骤：使用以下命令运行服务器。

npm start

输出：

示例 2：用户组件中的道具在本节中，我们将看到道具在用户定义的组件中的使用。

创建 React Native 应用程序：

• 第 1 步：使用以下命令创建 React Native 应用程序：

  expo init PropsUserDemo

• 第 2 步：创建项目文件夹后，即 PropsUserDemo ，使用以下命令移动到该文件夹：

  cd PropsUserDemo

项目结构：它看起来像这样。

实现：创建一个名为ImageFill.js的新组件文件，它将在名为 count 的 prop 中显示指定为 prop 的图像指定次数。

ImageFill.js

import { View, Image, StyleSheet, ScrollView } from 'react-native';
import React from 'react';
  
function ImageFill(props) {
    return (
        
            {[...Array(props.count)].map(
        () => (
          
        )
      )}
        
    );
}
  
// Creating styles
const styles = StyleSheet.create({
    contStyle:{
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
        width: "100%"  
    }
});
  
// Exporting ImageFill Component
export default ImageFill;

应用程序.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import ImageFill from './ImageFill';
  
// Exporting default component
export default function App() {
  return (
    
      
    
  );
}
  
// Creating styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection: 'column',
    flexWrap: 'wrap',
  },
});

运行应用程序的步骤：使用以下命令运行服务器。

npm start

输出：