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

1.执行命令，生产一个工程

$ react-native init BuyDemo

2.导入图片资源

安卓：把文件夹放到

/android/app/src/main/res/

目录下，如图：



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

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



4.Main.js

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

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.ios.js 引入Main.js并使用这个组件:

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

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.预览效果