初识react native

一. ReactNative的组织导入

reactive 需要导入所使用的没一个组件
语法如下

import React, {Component} from 'react';
import {
    View,
    WebView,
    NativeModules,
    AppRegistry
} from 'react-native';
import VideoView from './VideoView';

二.ReactNative的样式
ReactNative中所有的样式都采用样式对象来代替传统的样式表。标准的做法就是利用StyleSheet库进行样式的编写。

var FirstProject = React.createClass({
    render:function() {
      return(
          <View style = {styles.container}>
            <Text style={styles.welcome}>
            Welcome to React Native
            </Text>
            <Text style = {styles.instructions}>
               To get started,edit index.ios.js
            </Text>


          </View>

      );
    }
});


    var styles = StyleSheet.create({

        container: {
            flex: 1,
            justifyContent :'center',
            alignItems:'center',
            backgroundColor:'#f5fcff',
        },
        welcome: {
            fontSize:20,
            textAlign:'center',
            margin:10,
        },
        instructions: {
            textAlign:'center',
            color:'#333333',
            marginBottom:5,
        },
    });

所有的布局样式都采用flexbox。