props属性类型,props的用法

Bananas.js

/** * Created by zhoujian on 2019/4/9. */import React, {Component} from 'react';import {Image} from 'react-native';export default class Bananas extends Component{ //以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸 render(){ let pic = {uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}; return( <Image source={pic} style={{width:200,height: 200}}/> ); }}

index.js

import {AppRegistry} from 'react-native';import Bananas from './js/Bananas';import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => Bananas); 明亮的皮皮虾.js /** * Created by zhoujian on 2019/4/9. */import React, {Component} from 'react';import {View} from 'react-native';import Greeting from '../js/Greeting';type Props = {};export default class 明亮的皮皮虾 extends Component<Props>{ render(){ return( <View style={{alignItems:'center'}}> <Greeting name ="java" /> <Greeting name ="React Native" /> </View> ); }} Greeting.js /** * Created by zhoujian on 2019/4/9. */import React, {Component} from 'react';import {Text, View} from 'react-native';export default class Greeting extends Component { render() { return ( <View style={{alignItems:'center'}}> <Text>Hello {this.props.name}</Text> </View> ); }}

index.js

import {AppRegistry} from 'react-native';import 明亮的皮皮虾 from './js/明亮的皮皮虾';import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => 明亮的皮皮虾);