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);

Props（属性）

LotsOfGreetings.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 LotsOfGreetings 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 LotsOfGreetings from './js/LotsOfGreetings';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => LotsOfGreetings);

Props（属性）