数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学React Native 中的 props 是什么？
Props 是属性，有助于修改 React 组件。可以使用 props 概念创建具有不同参数的组件。通过 props，您可以将信息从一个组件传递到另一个组件，同时根据您的需求重复使用组件。
如果您熟悉 ReactJS，那么您将熟悉 props，React Native 中也遵循相同的概念。
让我们来看一个解释 props 的示例。
示例 1：React Native 内置组件中的 Props
考虑 Image 组件：
<Image
style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097 /gNLINY67_400x400.png'}}
/>style 和 source 是 Image 组件的属性，即 props。style props 用于添加样式，例如宽度、高度等，而 source props 用于为要显示给用户的图像分配 URL。source 和 style 是 Image 组件的内置 props。
您还可以使用存储 URL 的变量，并将其用于 source props，如下所示：
let imgURI = {
uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
<View style={styles.container}>
<Image style={styles.stretch} source={imgURI} />
</View>
);以下示例显示了使用内置 props 显示简单图像：
import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";
const MyImage = () => {
let imgURI = {
uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
<View style={styles.container}>
<Image style={styles.stretch} source={imgURI} />
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingTop: 50,
paddingLeft: 50,
},
stretch: {
width: 200,
height: 200,
resizeMode: 'stretch',
}
});
export default MyImage;示例 2：自定义组件中的 Props
您可以使用 props 将信息从一个组件发送到另一个组件。在下面的示例中，创建了两个自定义组件：Student 和 Subject。
Subject 组件如下：
const Subject = (props) => {
return (
<View>
<Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
</View>
);
}该组件接收参数 props。它用于在 Text 组件内显示名称为 props.name。让我们看看如何从 Student 组件向 Subject 组件传递 props。
Student 组件如下：
const Student = () => {
return (
<View>
<Subject name="Maths" />
<Subject name="Physics" />
<Subject name="Chemistry" />
</View>
);
}在 Student 组件中，Subject 组件与 name props 一起使用。传递的值是数学、物理和化学。可以通过向 name props 传递不同的值来重复使用 Subject。
这是一个包含 Student 和 Subject 组件以及输出的工作示例。
import React from 'react';
import { Text, View } from 'react-native';
const Subject = (props) => {
return (
<View>
<Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}! </Text>
</View>
);
}
const Student = () => {
return (
<View>
<Subject name="Maths" />
<Subject name="Physics" />
<Subject name="Chemistry" />
</View>
);
}
export default Student;输出
更新于：2021年7月1日
349 次浏览
广告