Giter VIP home page Giter VIP logo

dyfbuyapp's Introduction

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 协议进行分发和使用,更多信息参见协议文件。

dyfbuyapp's People

Contributors

duf1991 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

dyfbuyapp's Issues

有没有打过正式包运行过

有打过正式包运行过吗?jsBundle文件多大?第一次打开时间长吗?我写了一个类似的,打正式包的之后,第一次启动白屏时间10多秒,jsbundle文件2MB多点,

清空缓存

请问一下你的清空缓存怎么做的呢?

no podfile found

I cloned the project, but didn't find the podfile, so I couldn't execute pod install. Can you update it ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.