React-native之显示一张图片

最新推荐文章于 2024-09-03 07:24:35 发布

別說你還沒有盡力

最新推荐文章于 2024-09-03 07:24:35 发布

阅读量1.4k

点赞数

分类专栏： react-native

本文链接：https://blog.csdn.net/u013147860/article/details/65937149

版权

react-native 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

效果图：

index.android.js:

'use strict';
import React,{Component} from 'react';
import {AppRegistry,Image} from 'react-native';
class Bananas extends Component{
    render(){
        let pic = {
            uri:'http://p2.so.qhmsg.com/bdr/_240_/t01870507c38a144b17.jpg'
        };
        return(
           <Image source={pic} style={{width: 193,height: 110}}/>
        )
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => Bananas);

{pic}:这个花括号的意思是说括号内部为一个js变量或表达式，需要执行后取值。

第二个demo:

效果图：

index.android.js:

'use strict';
import React,{Component} from 'react';
import {AppRegistry,Text,View} from 'react-native';
class Greeting extends Component{
    render(){
        return(
           <Text>Hello {this.props.name}</Text>
        )
    }
}
class LotsOfGreetings extends Component{
    render(){
        return(
            /*里面有三个Greeting组件，每一个组件显示Hello {this.props.name}*/
            <View style={{alignItems: 'center'}}>
                <Greeting name='Rexxar'/>
                <Greeting name='Jaina'/>
                <Greeting name='Valeera'/>
            </View>
        );
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => LotsOfGreetings);

自定义组件使用props方式：this.props

props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。

View 常用作其他组件的容器，来帮助控制布局和样式。

ps:{alignItems: 'center'} center和‘之间不能有空格。不然会报这个错误：

error while updapting property alignItems in shadow node of type:RCTView