React Native 基础组件

import React, { Component } from 'react';

import { createStackNavigator } from 'react-navigation';

import {
  Platform,
  StyleSheet,
  ToolbarAndroid,
  AppRegistry,
  Text,
  View,
  Image,
  TextInput,
  Button,
  Alert,
  Fetch,
  Dimensions,
  TouchableOpacity
} from 'react-native';

import {
  FlatList,
  TouchableHighlight,
} from 'react-native';

import RegistCell from './RegistCell';

//宏定义字段
const {width, height} = Dimensions.get('window');
const SCREEN_WIDTH = width;

1、View
     <View style={{height:height/10}}></View>
     <View style={{flexDirection: 'row',height:100,marginTop:1,justifyContent: 'center',alignItems: 'flex-start'}}></View>

2、EditView
     <EditView  name='输入用户名/注册手机号'  onChangeText={(text) => {
             this.userName = text;
     }}/>

     <EditView  name='输入密码'  onChangeText={(text) => {
             this.password = text;
     }}/>

3、ScrollView
     <ScrollView 
            contentContainerStyle={{ flex: 1 }} // 非常重要，让ScrollView的子元素占满整个区域
            keyboardDismissMode="on-drag" // 拖动界面输入法退出
            keyboardShouldPersistTaps={false} // 点击输入法以外的区域，输入法退出 不加这两句也可以实现点击空白处收回键盘
            scrollEnabled={false} // 当值为false的时候，内容不能滚动，默认值为true
     >
     </ScrollView>

4、FlatList
     <FlatList
         data={this.state.data || []}
         renderItem={this.renderItem}
         keyExtractor={item => item.id}
         // onRefresh={this.handleRefresh}
         onEndReachedThreshold={0} />

5、Text
     <Text  style={styles.text}>手机号:</Text>
     <Text  style={styles.insideText}>{name}</Text>
     <Text  style={{color:"#4A90E2",textAlign:'center',marginTop:10}} >忘记密码？</Text>

6、TextInput
     <TextInput  style={styles.textInputStyle}  placeholder="请输入您的手机号码"  clearButtonMode="while-editing"  secureTextEntry={false}  value={this.state.username}
     onChangeText={(text) => {
         this.setState({
             username: text
         });
     }}
     />

7、LoginButton
     <LoginButton name='登录' onPressCallback={this.onPressCallback}/>

8、ButtonView
     <ButtonView 
            btnName='获取验证码'
            btnStyle = {{width: 90,marginRight: 10, backgroundColor: '#D6D6D6'}}
            onPress = {this._getPhoneCode}
            textStyle = {{color:'gray', justifyContent: 'flex-end',}}>
     </ButtonView>

9、Image
     <Image  source={require('../image/login.png')}  style={styles.image}  resizeMode={Image.resizeMode.stretch} />

*、TouchableOpacity
     <TouchableOpacity  disabled={this.state.isDisable}  onPress={this._beginCountDown.bind(this)}>
             <Text style={styles.texts} >{ this.state.begin === 0 ? '获取验证码' : this.state.timeLeft+"秒后重试"}</Text>
     </TouchableOpacity>

*、TouchableHighlight
     <TouchableHighlight
             style={[styles.btnDefaultStyle,this.props.btnStyle,styles.center]}
             activeOpacity={0.5}
             underlayColor={this.props.underlayColor}
             onPress={this.props.onPress}>

             <Text style={[styles.textDefaultStyle, this.props.textStyle]}>{this.props.btnName}</Text>

     </TouchableHighlight>