React Native 流水帳

流水帳的重點在於簡單介紹下React-Native(iOS)的根基文件 -> index.ios.js

React基礎

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

以上是應用中會用到的「組件列表」，既然是組件（component）那天然帶了組件的特性：

• 模塊化

• 複用性

• 可組合嵌套

其餘經常使用的組件還有image、TextInput、ListView。

render函數

var AwesomeProject = 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>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

整個render函數的做用就是建立一個AwesomeProject的組件（集）視圖（是View與Text的組合）。

樣式

組件天然有樣式屬性，這個屬性的闡述經過styles列表來闡述：

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的排版理念的屬性flex，能夠主要研究下~~

註冊組件

應用開啓須要聲明第一個組件的名字：

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