All Projects → duf1991 → Dyfbuyapp

duf1991 / Dyfbuyapp

我的第一个react-native学习成果,欢迎各位大佬star和issue!👏👏

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Dyfbuyapp

React Native Boilerplate
🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow
Stars: ✭ 375 (+108.33%)
Mutual labels:  react-native-app
Aws Amplify React Native Events App Workshop
This is a self-paced workshop designed for developers who want to build a React Native mobile application using mobile services from Amazon Web Services (AWS).
Stars: ✭ 59 (-67.22%)
Mutual labels:  react-native-app
React Native Navigation Animation
Transition navigation component for React Native
Stars: ✭ 133 (-26.11%)
Mutual labels:  react-native-app
Mozi
此项目致力于构建一套最基础,最精简,可维护的react-native项目,支持ios,android 🌹
Stars: ✭ 501 (+178.33%)
Mutual labels:  react-native-app
Nsfwjs Mobile
NSFWjs in React Native
Stars: ✭ 35 (-80.56%)
Mutual labels:  react-native-app
Nbareact
🏀 iOS and Android NBA app created with React Native
Stars: ✭ 101 (-43.89%)
Mutual labels:  react-native-app
Status React
a free (libre) open source, mobile OS for Ethereum
Stars: ✭ 3,307 (+1737.22%)
Mutual labels:  react-native-app
React Native Google Maps Directions
🚕 Get direction using Google Maps in React Native 🚗
Stars: ✭ 160 (-11.11%)
Mutual labels:  react-native-app
React Native Knowme
A ReactNative Project.
Stars: ✭ 56 (-68.89%)
Mutual labels:  react-native-app
React Native Pjsip App
Mobile VoIP application (android & ios) based on PjSIP and ReactNative
Stars: ✭ 125 (-30.56%)
Mutual labels:  react-native-app
React Native Firestack
A firestack v3 react-native implementation
Stars: ✭ 726 (+303.33%)
Mutual labels:  react-native-app
React Natives App
App for the React & React Native developer community as a demo project for the React Native meetups in Germany
Stars: ✭ 20 (-88.89%)
Mutual labels:  react-native-app
Insta Snap
Instagram and Snapchat like React Native App
Stars: ✭ 107 (-40.56%)
Mutual labels:  react-native-app
Shoutem.github.io
Supercharging React Native development
Stars: ✭ 497 (+176.11%)
Mutual labels:  react-native-app
Qrcode
React Native app for scanning and creating QR codes
Stars: ✭ 138 (-23.33%)
Mutual labels:  react-native-app
Comicapp
[停止维护] 基于 ReactNative、Redux 的漫画书App,支持Android、iOS 平台.
Stars: ✭ 376 (+108.89%)
Mutual labels:  react-native-app
React Native Firebase
🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
Stars: ✭ 9,674 (+5274.44%)
Mutual labels:  react-native-app
React Native
Hướng dẫn học React-Native cho người mới bắt đầu, nếu bạn thấy ổn thì cho star nhé.
Stars: ✭ 166 (-7.78%)
Mutual labels:  react-native-app
Reactnative Book Demo
我的出版书籍《React Native 精解与实战》配套源码
Stars: ✭ 139 (-22.78%)
Mutual labels:  react-native-app
React Native Firebase Chat
React Native chat application using firebase.
Stars: ✭ 113 (-37.22%)
Mutual labels:  react-native-app

DYFBuyApp

我的第一个react-native学习成果,欢迎各位大佬star和issue!👏👏

CI Status Gitter

这个是我从零开始学习react-native的一个学习记录过程,简单易懂,但涵盖功能全面,基本可以算是一个比较完整的电商app了,希望能够给react-native的初学者一些帮助。因为公司刚接手一个新的RN项目,而本人对于RN等跨平台完全没有接触过,甚至没有任何react等前端基础,html,css,javascript也是从未接触,但一直对这方面比较感兴趣,因此正好趁此机会学习了一把,感觉很有成就感,找到了曾经那种从0到1的掌握技能的感觉,整个过程大概顶多一个月时间。虽然RN现在可能没有以前那么火热,但是其跨平台思想还是很值得学习的,比如google新出的flutter其中很多思想与RN大同小异,例如其组件的state控制页面渲染机制等。当然这个项目还有很多功能可以后续慢慢完善的地方,我会持续更新的。 如果有好的建议,欢迎指正。

预览

RN电商app_1 RN电商app_1 RN电商app_1 RN电商app_1

上面是整个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 (
            <TabNavigator tabBarStyle={styles.tabBarStyle}>
                {/* --首页-- */}
                {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)}
            </TabNavigator>

        )

    },

    renderTabNavigatorItem(title, iconName, selectedIconName, selectedTab, componentName, component) {
        return (
            <TabNavigator.Item
                title={title}
                renderIcon={() => <VectorIcon name={iconName} size={25} color={'gray'}></VectorIcon>}
                renderSelectedIcon={() => <VectorIcon name={selectedIconName} size={25} color={'orange'}></VectorIcon>}
                onPress={() => { this.setState({ selectedTab: selectedTab }) }}
                selected={this.state.selectedTab === selectedTab}
                titleStyle={styles.titleStyle}
                selectedTitleStyle={styles.selectedStyle}
            >
                {/* <Home></Home> */}
                <Navigator
                    initialRoute={{ name: componentName, component: component }}
                    configureScene={(route) => {
                        return Navigator.SceneConfigs.PushFromRight;
                    }}
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator} />
                    }}
                >
                </Navigator>

            </TabNavigator.Item>

        )

    }

作者

Du Yingfeng, [email protected]

协议

DYFBuyApp 基于 MIT 协议进行分发和使用,更多信息参见协议文件。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].