React Native - Props

React Native - Props 首页 / React Native入门教程 / React Native - Props

React Native组件的属性简单地称为props。在React Native中,很多组件可以在创建时使用不同的参数进行自定义。这些参数称为props。是不可变的。

默认Props

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Image,
  Text,
  View
} from 'react-native';


export default class App extends Component<{}> {
  render() {
    let imagePath = { uri: 'https://facebook.github.io/react-native/img/header_logo.png'};
    return (
        <View style={styles.container}>
          <Text style={styles.welcome}>Welcome to React Native!</Text>
          <Image source={imagePath} style={{width: 250, height: 250}} />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#a7a6a9',
  },
  welcome: {
    fontSize: 30,
    textAlign: 'center',
    margin: 20,
  }
});

输出:

React Native Props

组件Props

我们也可以在我们的组件中使用 props 。通过this.props 属性来获取值。

App.js

 import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

class ChildClass extends Component {
  render() {
    return (
        <View style={{alignItems: 'center'}}>
          <Text style={styles.welcome}>Hello {this.props.name}!</Text>
        </View>
    );
  }
}

export default class ParentsClass extends Component {
  render() {
    return (
        <View style={{alignItems: 'center'}}>
          <ChildClass name='Ashu' />
          <ChildClass name='Aman' />
          <ChildClass name='Max' />
        </View>
    );
  }
}
const styles = StyleSheet.create({
   welcome: {
    fontSize: 30,
  }
});

// 如果使用 Create React Native App,请跳过此行
AppRegistry.registerComponent('MyReactNativeApp', () => ParentsClass);

输出:

React Native Props

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

SQL必知必会 -〔陈旸〕

Elasticsearch核心技术与实战 -〔阮一鸣〕

移动端自动化测试实战 -〔思寒〕

性能测试实战30讲 -〔高楼〕

手机摄影 -〔@随你们去〕

成为AI产品经理 -〔刘海丰〕

分布式金融架构课 -〔任杰〕

大厂广告产品心法 -〔郭谊〕

快手 · 音视频技术入门课 -〔刘歧〕

好记忆不如烂笔头。留下您的足迹吧 :)