React Native的Hello World和基本样式入门

Hello World

众所周知，Hello World大法好。接上一篇
所初始化的AwesomeProject项目来进行Hello World操作。

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

class HelloWorldApp extends Component {
  render() {
    return (
        <Text>Hello world!</Text>
  );
  }
}
//AwesomeProject是项目名。HelloWorldApp是上述的类名
AppRegistry.registerComponent('AwesomeProject',() => HelloWorldApp);

高度和宽度

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。

 <View style={{width: 50,height: 50,backgroundColor: 'powderblue'}} />

弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

如下

import React,View } from 'react-native';

class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 试试去掉父View中的`flex: 1`。
      // 则父View不再具有尺寸，因此子组件也无法再撑开。
      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
      <View style={{flex: 1}}>
        <View style={{flex: 1,backgroundColor: 'powderblue'}} />
        <View style={{flex: 2,backgroundColor: 'skyblue'}} />
        <View style={{flex: 3,backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject',() => FlexDimensionsBasics);

FlexBox布局

CSS3的FlexBox的参考

Flex Direction

React Native中的FlexBox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同.flexDirection的默认值是column而不是row

Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

总结

其实可以看出来和CSS挺像的。如果之前对CSS熟悉的话。掌握起来应该不太困难。

原文链接：https://www.f2er.com/react/304716.html