react-native-shop/index.android.js at master · htmlk/react-native-shop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import list1 from './app/base/containerlist.js';
import list2 from './app/base/searchlist.js';
import list3 from './app/base/likelist.js';
import list4 from './app/base/minelist.js';
import styles from './app/styles/main';
import icons from './app/Assets/icons';


import {
  AppRegistry,
  View,
  Text,
  Image,
  Navigator,
  TouchableHighlight,
  StatusBar,
} from 'react-native';

export default class jsochen extends Component {
  constructor(props) {
      super(props);
      this.state = {
        tabIndex: 0
      }
    }

    renderScene(route, navigator) {
      return <route.component navigator={navigator}   {...route.passProps} />;
    }

    configureScene(route, routeStack) {
      if (route.type == 'Modal') {
        return Navigator.SceneConfigs.FloatFromBottom;
      }
      return Navigator.SceneConfigs.PushFromRight;
    }

    render() {
      const routes = [
        {name: '首页',type:'Model',component: list1},
        {name: '发现',type:'Model', component: list2},
        {name: '喜欢',type:'Model', component: list3},
        {name: '我的',type:'Model', component: list4},
      ];

      const tabBars = [
        {title: '首页',imgSrcLight: icons.main,imgSrcDark:icons.main},
        {title: '发现',imgSrcLight: icons.search,imgSrcDark:icons.search},
        {title: '喜欢',imgSrcLight: icons.cart,imgSrcDark:icons.cart},
        {title: '我的',imgSrcLight: icons.mine,imgSrcDark:icons.mine},
      ];

      let tabBarList = tabBars.map((item, index) => {
        return (
          <View key={index} style={styles.tabBarItem}>
            <TouchableHighlight
              underlayColor = "#fff"
              onPress={(route) => {
                this.nav.replace(routes[index]);
              }} key={index}>
              <View style={styles.tabBarThumb}>
                <Image style={this.state.tabIndex === index ? styles.iconImageLight : styles.iconImageDark} source={{uri: this.state.tabIndex === index ? item.imgSrcLight : item.imgSrcDark}} />
                <Text style={this.state.tabIndex === index ? styles.tabBarLight : styles.tabBarDark}>{item.title}</Text>
              </View>
            </TouchableHighlight>
          </View>
        )
      })
      return (
        <View style={{flex: 1}}>
          <StatusBar
            backgroundColor="#008842"
            barStyle="light-content"
          />
          <Navigator
            initialRoute = {routes[0]}
            configureScene = {this.configureScene}
            renderScene = {this.renderScene}
            ref={(navigator) => {
               this.nav = navigator;
            }}
            onWillFocus = {(nextRoute) => {
               if(nextRoute != routes[this.state.tabIndex]){
                  this.setState({
                    tabIndex: routes.indexOf(nextRoute)
                  })
               }
            }}
            navigationBar = {
              <View style={styles.tabBar}>
                <View style={styles.tabBarBox}>
                  {tabBarList}
                </View>
              </View>
            }
          />
        </View>
      )
    }
}


AppRegistry.registerComponent('jsochen', () => jsochen);