props

最新推荐文章于 2025-05-30 21:57:11 发布

转载最新推荐文章于 2025-05-30 21:57:11 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/funnyweb/p/6208662.html

本文介绍了一个使用React Native创建的应用程序实例，该程序通过定义一个名为Greeting的组件来显示个性化的问候信息。每个Greeting组件接收不同的名字作为属性，并在屏幕上显示。此示例展示了如何在React Native应用中重复使用组件。

// 这里是导入的包
import React, { Component } from 'react';
// 导入需要用到的组件
import { 
  AppRegistry, 
  Text,
  View 
} from 'react-native';

// 定义一个类，在 render 回调中返回 Text 控件，
class Greeting extends Component{
  render(){
    return(
// 从调用标签中取出 props.name ,并将其插入到 文本中
      <Text>你好,{this.props.name}!</Text>
    );
  }
}


export default class AwesomeProject extends Component {
  render() {
    return(
      <View style={{alignItems:'center',marginTop:50}}>
        <Greeting name='李荣浩' />
        <Greeting name='李云龙' />
        <Greeting name='李小璐' />
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);