React-Native 入门之组件属性（三）

React-Native开发环境搭建完成，本文运行演示环境以iOS为例；（开发环境配置见：https://www.jianshu.com/p/970c44cf800e）
注：本文标注的px单位，均为UI设计稿上的px单位

View容器入门

如果需要让ListView左右缩进15px,则如下：

import {
  View,
  ListView,
  PixelRatio, // 注意这里是为了使用 PixelRatio.get() 属性 
} from 'react-native'
//设置listView的布局样式

TabBar入门

import {
  View,
  StyleSheet,
  PixelRatio, 
} from 'react-native'
//要用到 PixelRatio.get() 则需从react-native组件中引用 PixelRatio

 { this._tabbar = ref; tabbarRoute = ref }}  //暂时未研究到，之后补上
      >

Demo

用VSCode编辑器打开App.js文件，下面简介一下，各部分的作用：

//添加RN组件
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image//添加image全局变量
} from 'react-native';
//根据Platform自动选择对应平台下要显示的字符串
const platformInfo = Platform.select({
  ios:'this platform is ios',
  android: 'this platform is android',
});

type Props = {};
export default class App extends Component {
  //调用render()函数进行渲染
  render() {
    //回调
    return (
      
        
          Welcome to React Native!
        
      
        
          {platformInfo}
        
      
    );
  }
}
//css样式定制
const styles = StyleSheet.create({
  //容器样式
  container: {
    flex: 1,
    justifyContent: 'center',//justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，可选：flex-start|flex-end|center|space-between|space-around|initial|inherit;
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  //内容样式
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 25,
    marginBottom: 5,
  },
  picture: {
    width: 80,
    height: 150,
    },
});

未完待续...