react native 弱爆例子2

1.继续修改例子1的的App.js,想在下面插入一个图片

2.修改App.js

增加一个Image的，在View里面增加一个<Image source={pic} style={{width: 193, height: 110}} />

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


export default class HelloWorldApp extends Component {

  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Hello, Keny88888!</Text>
         <Image source={pic} style={{width: 193, height: 110}} />
        </View>
    );
  }
}

只是增加图片，基本了解一下组件知识

 

3.  想把字体放大一点

定义一个样式 bold （临时的变量）不是很好的定义，

将字体加重和字体大小为36号字

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

var bold={ fontWeight:'bold',
           fontSize : 36};

export default class HelloWorldApp extends Component {

  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text style={bold} >Hello, Keny88888!</Text>
         <Image source={pic} style={{width: 193, height: 110}} />
        </View>
    );
  }
}

 

显示结果为：