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 是属性,即图像组件的 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> );
The example below shows the display of a simple image using the built-in 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 组件将 props 传递给 Subject 组件。
Student 组件如下 −
const Student = () => { return ( <View> <Subject name="Maths" /> <Subject name="Physics" /> <Subject name="Chemistry" /> </View> ); }
在 Student 组件中,Subject 组件与 name 属性一起使用。传递的值是数学、物理和化学。可以通过将不同的值传递给 name 属性来重复使用 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;