Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/duf1991/dyfbuyapp
我的第一个react-native学习成果，欢迎各位大佬star和issue!👏👏
https://github.com/duf1991/dyfbuyapp
buyapp react-native react-native-app
Last synced: about 1 month ago
JSON representation
我的第一个react-native学习成果，欢迎各位大佬star和issue!👏👏
- Host: GitHub
- URL: https://github.com/duf1991/dyfbuyapp
- Owner: duf1991
- Created: 2018-11-12T06:50:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-15T03:12:20.000Z (over 5 years ago)
- Last Synced: 2024-10-11T10:05:13.443Z (about 1 month ago)
- Topics: buyapp, react-native, react-native-app
- Language: JavaScript
- Homepage:
- Size: 22 MB
- Stars: 182
- Watchers: 6
- Forks: 60
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DYFBuyApp
我的第一个react-native学习成果，欢迎各位大佬star和issue!👏👏
[]()
这个是我从零开始学习react-native的一个学习记录过程，简单易懂，但涵盖功能全面，基本可以算是一个比较完整的电商app了，希望能够给react-native的初学者一些帮助。因为公司刚接手一个新的RN项目，而本人对于RN等跨平台完全没有接触过，甚至没有任何react等前端基础，html,css,javascript也是从未接触，但一直对这方面比较感兴趣，因此正好趁此机会学习了一把，感觉很有成就感，找到了曾经那种从0到1的掌握技能的感觉,整个过程大概顶多一个月时间。虽然RN现在可能没有以前那么火热，但是其跨平台思想还是很值得学习的，比如google新出的flutter其中很多思想与RN大同小异，例如其组件的state控制页面渲染机制等。当然这个项目还有很多功能可以后续慢慢完善的地方，我会持续更新的。
如果有好的建议，欢迎指正。
## 预览
上面是整个app的基本效果，大家简单感受一下～
## 示例
1. 利用 `git clone` 命令下载本仓库；
2. 利用cd 命令切换到 RN工程目录下（即package.json上一级目录），执行`npm install`命令（这一步很重要！）
3. 随后在RN工程目录下执行`react-native run-ios 或 react-native run-andriod`或者 打开 `LPDSliderView.xcworkspace 或者 安卓工程` 编译即可。
## 需求
XCode 9.0+
## 安装
```
npm install react-native-dyfbuyapp --save
```
## 使用
```
大家可以根据自己的业务需要自行扩展即可～
主要结构如下
var Main = React.createClass({
getInitialState() {
return {
selectedTab: 'home'
}
},
render() {
return (
{/* --首页-- */}
{this.renderTabNavigatorItem('首页','account-balance','account-balance','home', '首页', Home)}
{/* --商家-- */}
{this.renderTabNavigatorItem('商家','store','store','shop', '商家', Shop)}
{/* --我的-- */}
{this.renderTabNavigatorItem('我的','account-circle','account-circle','mine', '我的', Mine)}
{/* --更多-- */}
{this.renderTabNavigatorItem('更多','settings','settings','more', '更多', More)}
)
},
renderTabNavigatorItem(title, iconName, selectedIconName, selectedTab, componentName, component) {
return (
}
renderSelectedIcon={() => }
onPress={() => { this.setState({ selectedTab: selectedTab }) }}
selected={this.state.selectedTab === selectedTab}
titleStyle={styles.titleStyle}
selectedTitleStyle={styles.selectedStyle}
>
{/* */}
{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return
}}
>
)
}
```
## 作者
Du Yingfeng, [email protected]
## 协议
DYFBuyApp 基于 MIT 协议进行分发和使用，更多信息参见协议文件。