React Native商城项目实战01 - 初始化设置

1.创建项目

$ react-native init BuyDemo

 

2.导入图片资源

安卓：把文件夹放到/android/app/src/main/res/目录下，如图： 

iOS: Xcode打开工程，把图片拖动到Images.xcassets里

 

3.根据实际需求，组织项目结构，目的是更加清晰 

 

 

4.Main.js

/**
 * 主页面
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

// ES5
var Main = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Main
                </Text>
            </View>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

// 输出
module.exports = Main;

 

5.index.android.js 引入Main.js并使用这个组件

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

/*==============导入外部组件================*/
var Main = require('./Component/Main/Main');

class BuyDemo extends Component {
    render() {
        return (
            <Main />
        );
    }
}

const styles = StyleSheet.create({
});

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

 

6.效果图

.