/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 * @flow

 */

import React, {

    Component

} from 'react';

import {

    Platform,

    StyleSheet,

    Text,

    View,

    Image,

    TextInput

} from 'react-native';

import ModalDropdown from 'react-native-modal-dropdown';

const instructions = Platform.select({

    ios: 'Press Cmd+R to reload,\n' +

        'Cmd+D or shake for dev menu',

    android: 'Double tap R on your keyboard to reload,\n' +

        'Shake or press menu button for dev menu',

});

type Props = {};

export default class App extends Component < Props > {

    constructor(props) {

        super(props);

        this.state = {

            text: '',

            value:'',

            c:'86'

        }

    }

    render() {

        let pic = {

            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'

        };

        let phone=[86,100,200,300]

        return(

        <View style={styles.container}>

              <Image source={require('./img/img.jpg')} style={{width: 193, height: 110}} />

             <Text style={styles.title}>

                 代理后台

             </Text>

            <View style={{flexDirection: 'row',borderBottomColor:'#dbdbdb',borderBottomWidth:1}}>

                 <Text style={{marginRight:10}}>

                    国家/地区

                 </Text>

                 <ModalDropdown

                      options={['中国大陆', '香港','台湾','美国']}

                      dropdownStyle={{height: 300,width:200}}

                      textStyle={{height: 30,width:200,padding:0}}

                      defaultValue='中国大陆'

                      onSelect={(index,value)=>{

                          this.setState({

                              c:phone[index]

                          })

                      }}

                  />

              </View>

            <View style={{flexDirection: 'row',borderBottomColor:'#dbdbdb',borderBottomWidth:1}}>

                 <Text style={{height: 40,marginRight:40,lineHeight:40}}>

                      + {this.state.c}

                  </Text>

                 <TextInput

                  style={{height: 40,width:200,padding: 0}}

                  underlineColorAndroid="transparent"

                  keyboardType ='numeric'

                  placeholder="请输入手机号"

                  onChangeText={(text) => this.setState({text})}

                  secureTextEntry={true}

                />

            </View>

            <View style={{

                borderBottomColor:'#dbdbdb',

                borderBottomWidth:1

            }}>

             <TextInput

              style={{height: 40,width:200,padding:0}}

               keyboardType ='numeric'

              underlineColorAndroid="transparent"

              placeholder="请输入验证码"

              onChangeText={(text) => this.setState({text})}

            />

            </View>

            <Text style={styles.instructions}>

             {this.state.text}

            </Text>

            <Text style={styles.instructions}>

              {instructions}

            </Text>

      </View>

        );

    }

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        justifyContent: 'flex-start',

        paddingTop: 10,

        alignItems: 'center',

        backgroundColor: '#fff',

    },

    title: {

        fontSize: 20,

        textAlign: 'center',

        color: '#000',

        margin: 10,

    },

    instructions: {

        textAlign: 'center',

        color: '#333333',

        marginBottom: 5,

    },

});