ReactNative的基本组件的认识

通过官网的react-native init myProject，并打开Android Studio的手机模拟器进行调试

下面的代码使用了 Text 、Image、View、TextInput和的react-native-modal-dropdown（下拉框）的组件，初步开发了一个登陆界面

1、Image的 source静态资源需要 require的引入，服务器资源的引入uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'

2、一行显示设置flexDirection: 'row'

3、android的输入框TextInput的

 <TextInput
		          style={{height: 40,width:200,padding: 0}}
		          underlineColorAndroid="transparent" 去掉下边框
		          keyboardType ='numeric' 调起的是数字键盘
		          placeholder="请输入手机号"
		          onChangeText={(text) => this.setState({text})}
		          secureTextEntry={true} 像password的输入
		        />

　　

 

 

/**
 * 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,
    },
});

View Code