hcmobile-sdk/components/Home.js

mobile-sdk

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import Button from './button';
import BtnImg from '../images/appointmentBtn.png';
import RowLayout from './rowLayout';


export default class Home extends Component{

  constructor(props) {
    super(props);
    this.data = [
        {
            name:'ButtonDemo'
        },
        {
            name:'TextInputDemo'
        },
        {
            name:'RowLayoutDemo'
        },
        {
            name:'SwitchDemo'
        },
        {
            name:'UltimeateListViewDemo'
        },
        {
            name:'PickerViewDemo'
        },
        {
            name:'ViewPagerDemo'
        },
        {
            name:'ImagePickerDemo'
        },
        {
            name:'ActionSheetDemo'
        },
        {
          name:'SegmentControllDemo'
        },
        {
            name:'SelectButtonDemo'
        },
        {
            name:'KeyBoardScrollViewDemo'
        },
        {
            name:'ImageViewerDemo'
        },
        {
            name:'DeviceInfoDemo',
        },
        {
            name:'BadgeDemo',
        },
        {
            name:'ModalDropdownDemo',
        },
        {
            name:'AlertDemo',
        }
    ];
    this._renderItem = this._renderItem.bind(this);
    this._keyExtractor = this._keyExtractor.bind(this);
  }

  _keyExtractor = (item, index) => item.name;

  render() {
    return (
      <View style={styles.container}>
        <FlatList
            data = {this.data}
            keyExtractor={this._keyExtractor}
            renderItem={(item,index)=> this._renderItem(item,index)}
        />
      </View>
    );
  }

  _renderItem(item,index) {
    return(
        <RowLayout
            style = {{flex:1,}}
            tag = {item.item.name}
            lineColor = '#999'
            isTop = {item.index == 0}
            content = ''
            showArrow
            onClick = {() => {
                this.props.navigation.navigate(item.item.name);
            }}
        />
    );
  }



}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});