react-native 电商项目笔记（一）

项目结构：

Main页面采用tab和Navigator结合的方式

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,

} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Navigator from 'react-native-deprecated-custom-components';
import Home from '../Home/Home'
import Shop from '../Shop/Shop'
import Mine from '../Mine/Mine'
import More from '../More/More'

export default class Main extends Component {
    constructor(props){
        super(props);
        this.state={
            selectedTab:'home'
        }
    }

    render() {
        return (
                    <TabNavigator>
                        {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)}
                    </TabNavigator>
        );
    }
   //抽出来的组件
    renderTabBarItem(title,iconName,icon_selectedName,selectedTab,componentName,Component){
        return(
            <TabNavigator.Item
              title={title}
                renderIcon={() => <Image source={{uri:iconName}}  style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={{uri:icon_selectedName}} style={styles.iconStyle}/>}
                selected={this.state.selectedTab === selectedTab}
                onPress={() => this.setState({ selectedTab: selectedTab })}
                selectedTitleStyle={styles.selectedTitleStyle}
            >
                <Navigator.Navigator
                  initialRoute={{name: componentName, component: Component}}
                    configureScene=
                        {
                            (route)=>{
                                return Navigator.Navigator.SceneConfigs.FadeAndroid;
                            }
                        }
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator}/>
                    }
                    }
                />

            </TabNavigator.Item>
        )
    }
}

在HOME页面测试Navigator，即点击跳转到HoneDetail页面

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import Detail from './HomeDetail'

export default class Home extends Component {

    _pressButton() {      //点击跳转
        const {navigator} = this.props;
        if(navigator) {
            navigator.push({
                name:'详情页面',
                component:Detail
            })
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={this._pressButton.bind(this)}>
               Home页面
                </Text>
            </View>
        );
    }
}

在HomeDetai页面测试点击返回上一页面

export default class HomeDetail extends Component {

    _pressButton(){  //点击返回上一页面
        const {navigator} = this.props;
        if(navigator){
            navigator.pop();
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={this._pressButton.bind(this)}>
                    HomeDetail 详情页面 点击返回
                </Text>
            </View>
        );
    }
}


react-native-deprecated-custom-components Navigator使用总结：
initialRoute：定义启动时加载的路由，就是由此页面跳转到其它页面，为导航的初始页面。
configureScene：用来配置场景动画和手势，即跳转页面时的动画，这里是淡入淡出。
renderScene：用来渲染指定路由的场景。
return <Component {...route.params} navigator={navigator}/>  向下传递参数所以在
Home页面中有 const{navigator} = this.props;