1.HomeMiddleView.js /** * 首页中间上部分内容 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'; var Dimensions = require('Dimensions'); var screenW = Dimensions.get('window…

1.公共的标题栏组件TitleCommonCell.js /** * 首页购物中心 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'; // ES5 var TitleCell = React.createClass({ getDefaultProps(){ return{…

1.MiddleBottomView.js /** * 首页中间下部分 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'; var Dimensions = require('Dimensions'); var screenW = Dimensions.get('window…

1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图. 2.HomeTopView.js /** * 首页头部内容 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ScrollView, Image, ListView } from 'react-native'; var Dimensions = require(…

1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Platform } from 'react-native'; var Dimensions = require('Dimensions'); var screenW = Dimensions.get('wi…

1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Platform, //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件类==============*/ import TabNavigator from 'react-native-tab-navigator'; import…

1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, Platform //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件…

1.创建MineHeaderView.js /** * 个人中心头部内容 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'; // 导入系统类 var Dimensions = require('Dimensions'); var screenW = Dimensions.g…

1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native'; // ES5 var HomeDetail = React.createClass({ render() { return ( <View style=…

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, Te…