react native手机app编程之样式与布局

alltolove

react最有特色的就是组件式编程，上次演示的helloworld代码只用了两个组件，一个是<View></View>组件，有点类似于html里div标签的作用，一个是<Text></Text>放置文本的组件。在使用组件之前要用import语句引入人家已经编辑好的组件，其实我们自己也可以创建组件，这个明天再说。

在组件的尖括号里可以放置行内样式，像昨天的代码一样。也可以把样式分离出来，单写进一个json变量里，用的时候引入进标签里。例如，以下代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class myreact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.box1}>读书</Text>
        <Text style={styles.box2}>游戏</Text>
        <Text style={styles.box3}>看视频</Text>
        <Text style={styles.box4}>新闻</Text>       
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
    justifyContent:'flex-start', 
    flexWrap: 'wrap', 
  },
  box1: {
    fontSize: 20,
    textAlign: 'center',
    textAlignVertical: 'center',
    margin: 10,
    backgroundColor: 'green',
    height: 170,
    width:90
  },
  box2: {
    fontSize: 20,
    textAlign: 'center',
    textAlignVertical: 'center',
    margin: 10,
    backgroundColor: 'red',
    height: 170,
    width:100
  },
  box3: {
    fontSize: 20,
    textAlign: 'center',
    textAlignVertical: 'center',
    margin: 10,
    backgroundColor: 'blue',
    height: 170,
    width:120
  },
  box4: {
    fontSize: 20,
    textAlign: 'center',
    textAlignVertical: 'center',
    margin: 10,
    backgroundColor: 'orange',
    height: 170,
    width:220
  },
});

AppRegistry.registerComponent('myreact', () => myreact);

这就类似于网页制作的盒子布局，跟css样式很像，还给我们提供了许多额外的样式，在container变量里的flex:1表示把整个view标签充满整个屏幕，
flexDirection: 'row',
    justifyContent:'flex-start',
    flexWrap: 'wrap',
这3个语句依次是设置为行布局，内容从前向后排列，自动换行。

在文件存盘后程序会自动刷新手机app，如果卡了你也通过摇一摇的方式调出主菜单，点reload手动刷新也行。
以下是手机上显示的效果：

不二如是

有点模样了～