https://github.com/zhangyanlf/zylbuy

React-Native实现购物商城（iOS/Android）
https://github.com/zhangyanlf/zylbuy

android ios react-native

Last synced: 3 months ago
JSON representation

React-Native实现购物商城（iOS/Android）

• Host: GitHub
• URL: https://github.com/zhangyanlf/zylbuy
• Owner: zhangyanlf
• Created: 2017-04-06T08:40:49.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-12T09:23:42.000Z (about 8 years ago)
• Last Synced: 2025-01-09T14:39:54.630Z (5 months ago)
• Topics: android, ios, react-native
• Language: JavaScript
• Homepage:
• Size: 2.47 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ZylBuy

1.创建工程  导入资源

2.实现主界面

import React, { Component } from 'react';

import {

    AppRegistry,

    StyleSheet,

    Text,

    View,

    Image,

    Platform, //判断系统

    Navigator

} from 'react-native';

/**----导入外部组件-----**/

import TabNavigator from 'react-native-tab-navigator';

var Home = require('../Home/ZylHome');

var Mine = require('../Mine/ZylMine');

var Shop = require('../Shop/ZylShop');

var More = require('../More/ZylMore');

var Main = React.createClass({

    //初始化函数（变量是可以改变，从当状态机的角色）

    getInitialState(){

      return{

          selectedTab:'home' //默认是第一个

      }

    },

    render() {

        return (

            

                {/*--首页--*/}

                {this.renderTabBarItem('首页', 'icon_tabbar_homepage', 'icon_tabbar_homepage_selected', 'home', '首页', Home)}

                {/*--商家--*/}

                {this.renderTabBarItem('商家', 'icon_tabbar_merchant_normal', 'icon_tabbar_merchant_selected', 'shop', '商家', Shop)}

                {/*--我的--*/}

                {this.renderTabBarItem('我的', 'icon_tabbar_mine', 'icon_tabbar_mine_selected', 'mine', '我的', Mine)}

                {/*--更多--*/}

                {this.renderTabBarItem('更多', 'icon_tabbar_misc', 'icon_tabbar_misc_selected', 'more', '更多', More)}

            

        );

    },

    //每一个TabBarItem

    renderTabBarItem(title, iconName, selectedIconName, selectedTab, componentName, component, badgeText ){

        return(

             }

                renderSelectedIcon={() => } //选中图标

                onPress={() =>{this.setState({selectedTab:selectedTab})}}

                selected={this.state.selectedTab === selectedTab}

                selectedTitleStyle={styles.selectedTitleStyle}

                badgeText={badgeText}

            >

                 {

                        return Navigator.SceneConfigs.PushFromRight;

                    }}

                    renderScene={(route,navigator) => {

                        let Component = route.component;

                        return 

                    }}

                />

            

        )

    }

});

const styles = StyleSheet.create({

    iconStyle: {

        width: Platform.OS === 'ios' ? 30 :25,

        height: Platform.OS === 'ios' ? 30 :25

    },

    selectedTitleStyle: {

        color: 'orange'

    }

});

//输出组件类

module.exports = Main;

3.更多和我的界面绘制

4.完成首页及商家界面（由于只抓到部分二级界面地址，实现了部分二级页面展示）

### 运行

$ git clone [email protected]:80percent/react-native-project.git && cd react-native-project

$ npm install

$ react-native run-ios or react-native run-android