ReactNative:学习props的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xubuhang/article/details/52440722

学习props的使用
/index.android.js

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

class Greeting extends Component {
    render() {
        // let pic = {
        //  uri: this.props.mypic
        // };
        return (
            <View>
            <Image source={{uri: this.props.mypic}} style={{width: 193, height: 110}}/> 
            <Text > 标题:{this.props.name} < /Text>
        </View>
        );
    }
}

class LotsOfGreetings extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' mypic='https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' />
        <Greeting name='Jaina' mypic='https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'/>
        <Greeting name='Valeera' mypic='https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'/>
      </View>
        );
    }
}

//注册组件(包名,组件名);
AppRegistry.registerComponent('HelloWorldApp', () => LotsOfGreetings);

猜你喜欢

转载自blog.csdn.net/xubuhang/article/details/52440722