react-native試玩(4)-建立項目

源碼

/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  View,} = React;var helloworld = 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>    );  }});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,  },});AppRegistry.registerComponent('hellowrold',() => helloworld);

問題

AppRegistry.registerComponent('hellowrold',() => helloworld);中registerComponent方法的第一個參數hellowrold參數一定要跟項目名一樣，否則就會報錯。

總結

建立項目分5步： 引入react-native

var React = require('react-native');

定義組件

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

定義介面控制項

var helloworld = React.createClass({});

定義控制項樣式

var styles = StyleSheet.create({});

為項目註冊介面

AppRegistry.registerComponent('項目名',() =>介面);