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.效果图
.
React Native商城项目实战01 - 初始化设置的更多相关文章
- React Native商城项目实战10 - 个人中心中间内容设置
1.新建一个MineMiddleView.js,专门用于构建中间的内容 /** * 个人中心中间内容设置 */ import React, { Component } from 'react'; im ...
- React Native商城项目实战07 - 设置“More”界面导航条
1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...
- React Native商城项目实战05 - 设置首页的导航条
1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...
- React Native商城项目实战06 - 设置安卓中的启动页
1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...
- React Native商城项目实战08 - 设置“More”界面cell
1.自定义可复用的cell More/CommonCell.js: /** * 自定义可复用的cell */ import React, { Component } from 'react'; imp ...
- React Native商城项目实战04 - 封装TabNavigator.Item的创建
1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...
- React Native商城项目实战03 - 包装Navigator
1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { App ...
- React Native商城项目实战02 - 主要框架部分(tabBar)
1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...
- React Native商城项目实战12 - 首页头部内容
1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图. 2.HomeTopView.js /** * 首页头部内容 */ import React, ...
随机推荐
- 093、如何用Graylog 管理日志? (2019-05-17 周五)
参考https://www.cnblogs.com/CloudMan6/p/7821817.html 上节我们已经部署好了 Graylog ,现在学习如何使用他来管理日志. 首先运行测试容器, ...
- eclipse经常弹出Subversion Native Library Not Available解决方案
- python内置下载服务器
python内置了一个下载服务器.例如你的同事要让你传的文件位于某一个目录下面,那么你可以进入这个目录,然后执行下面的命令启动一个下载服务器 python2 python -m SimpleHTTPS ...
- element-ui 中 switch 开关绑定number 的解决方法
虽然element-ui 的文档中说明 v-model的值可以是 boolean / string / number 三种类型 , (文档在此)https://element.eleme.cn/#/z ...
- com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value 'PDT' is.......
SpringBoot连接数据库的时候报错 java.sql.SQLException: The server time zone value 'PDT' is unrecognized or repr ...
- 现身说法:面对DDoS攻击时该如何防御?
上周,我们的网站遭到了一次DDoS攻击.虽然我对DDoS的防御还是比较了解,但是真正遇到时依然打了我个措手不及.DDoS防御是一件比较繁琐的事,面对各种不同类型的攻击,防御方式也不尽相同.对于攻击来的 ...
- 裸机开发体验之led快速体验
[root@promote led]# arm-linux-gcc -g -c led.S[root@promote led]# lsled.lds led.o led.S Makefile[root ...
- 如何在 Visual C# 中执行基本的文件 I/O
演示文件 I/O 操作 本文中的示例讲述基本的文件 I/O 操作.“分步示例”部分说明如何创建一个演示下列六种文件 I/O 操作的示例程序: 注意:如果要直接使用下列示例代码,请注意下列事项: 必须包 ...
- Linux日常之命令sort
素材借鉴:https://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html 命令sort 是Linux中常用的排序命令,属于管道命令. 常 ...
- Linux中关闭SSH的DNS解析
在操作中,我们都会用SSH协议来远程控制虚拟机,但是在输入用户名时候,会有一段时间的卡顿,此时正在进行SSH协议的DNS解析,我们为了快速的连接到虚拟机上,就要关闭这个解析过程,如下是具体配置: 1. ...