react-native试玩(4)-新建项目

前端之家收集整理的这篇文章主要介绍了react-native试玩(4)-新建项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

源码

/** * Sample React Native App * https://github.com/facebook/react-native */
@H_301_5@'use strict';

var React = require(@H_301_5@'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,{@H_301_5@'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: @H_301_5@'center',alignItems: @H_301_5@'center',backgroundColor: @H_301_5@'#F5FCFF',},welcome: {
    fontSize: 20,textAlign: @H_301_5@'center',margin: 10,instructions: {
    textAlign: @H_301_5@'center',color: @H_301_5@'#333333',marginBottom: 5,});

AppRegistry.registerComponent(@H_301_5@'hellowrold',() => helloworld);

问题

AppRegistry.registerComponent('hellowrold',() => helloworld);registerComponent方法的第一个参数hellowrold参数一定要跟项目名一样,否则就会报错。

总结

新建项目分5步:

引入react-native

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

定义组件

var { AppRegistry,} =@H_301_5@ React; 

定义界面控件

var helloworld =@H_301_5@ React.createClass({});

定义控件样式

var styles = StyleSheet.create({});

为项目注册界面

AppRegistry.registerComponent(@H_301_5@'项目名',() =>界面);

猜你在找的React相关文章