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的布局样式
<ListView contentContainerStyle = {[this.styles.listViewStyle,  { right: 15 / PixelRatio.get() , left: 15 / PixelRatio.get()}]}>

TabBar入门

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

<TabBar
        tabBarTextColor = '16进制的color'  //设置normal下tabbar的字体颜色
        tabBarTextColorSelected = '#ff0000'  //设置selected下tabbar字体颜色
        tabBarTintColor = '#E6E6FA'  //设置tabbar的背景色
        tabBarFontSize = {22 / PixelRatio.get()}  //设置tabbar字体size
        defaultPage = {defaultPage}  //app启动时，默认选中的tabBarItem的下标 - defaultPage默认为0
        badgeStyle = {styles.badgeNoNumber}  //徽章的样式 - badgeNoNumber为自定义样式
        //ref={(ref) => { 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<Props> {
  //调用render()函数进行渲染
  render() {
    //回调
    return (
      <View style = {styles.container}>
        <Text style = {styles.welcome}>
          Welcome to React Native!
        </Text>
      <Image 
        //source 即图片来源，格式：source = {{uri:'图片链接地址'}}
        source = {{uri: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2277942808,1417432970&fm=27&gp=0.jpg'}}
        style = {styles.picture} />
        <Text style = {styles.instructions}>
          {platformInfo}
        </Text>
      </View>
    );
  }
}
//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,
    },
});

未完待续...