campus_react_local/App/views/Login/CountCodeListViewController.js

/**
 * Created by zack on 2018/6/28.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	TouchableOpacity,
	FlatList,
	Modal,
	Animated,
	TextInput,
	Platform,
	Keyboard,
	Picker,
	DatePickerAndroid,
	DatePickerIOS,
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
import HttpTools from '../../network/HttpTools'
import {auth, getUserProfile, userProfile, userEmailCode, userSmsCode, userEmail,
	userMobile} from '../../network/API'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import ChinaRegionWheelPicker from 'rn-wheel-picker-china-region'
import ToastMsg from '../../utils/ToastMsg'
import CountryCode from '../../utils/CountryCode'
import CountryCodeItem from './View/CountryCodeItem'

export default class CountCodeListViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			dataSources: CountryCode
		}
	}

	renderItem(item) {
		let list = item.split('|')
		let name = list[2]
		let phoneCode = list[3]
		return(
			<CountryCodeItem
				name = {name}
				phoneCode = {phoneCode}
				didSelectedItem = {() => {
					this.props.didSelectedItem(phoneCode)
					this.props.navigator.pop()
				}}
			/>
		)
	}

	render() {
		return(
			<View>
				<View style={styles.ListView}>
					<FlatList
						data = {this.state.dataSources}
						renderItem={({item}) => this.renderItem(item)}
						keyExtractor = {(item,index) =>{
							return 'key' + item.key + index
						}}
						ListHeaderComponent = {() => {
							return(
								<View style={{width: ScreenDimensions.width, height: 40, backgroundColor: '#efeff4', justifyContent: 'center'}} >
									<Text style={{fontSize: 14, color: '#878a8c',marginLeft: 15}}>{'常用国家和地区'}</Text>
								</View>
							)
						}}
						ListFooterComponent = {() => {
							return(
								<View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
							)
						}}
					/>
				</View>

			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'white'
	},
	ListView: {
		marginTop: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height,
		backgroundColor: 'white'
	},
})