1、基本属性使用

import React,{Component} from 'react'
import {
    View,
    AlertIOS,
    TouchableHighlight,
    Button,
    ActivityIndicator,
    StyleSheet,
    Alert,
    Text,
    Image,
    AppRegistry,
    TextInput,
    Dimensions,
    dismissKeyboard,
    TouchableWithoutFeedback,
    
} from 'react-native'
export default class FlexboxDemo extends Component {

constructor(props) {
    super(props);
    this.state = {

    color:'red',
    value:''

    };
    }
getValue(text){
    TEST = text;

this.setState(
    {
        value:text
    }
)

}
    render() {
        return(
        <TouchableWithoutFeedback onPress={require('dismissKeyboard')}>
        <View style={styles.style1}>
            <TextInput
                        style={{width:300,height: 140, borderColor: 'gray', borderWidth: 1,color:'red',fontSize:35}}
                        returnKeyType='search'
                        keyboardAppearance='dark'
                        multiline={true}
                        placeholderTextColor='green'
                        placeholder='请输入'
                        editable={true}
                        keyboardType='numeric'
                        clearButtonMode='while-editing'
                        maxLength={10}
                        onChangeText={this.getValue.bind(this)}
                        value={this.state.value}
                    />
                    <View style={{backgroundColor:'green',marginBottom:10,width:300,height:200,opacity:0.6,flexDirection:'column-reverse'}}>

                        <TouchableHighlight onPressOut={(this.onButtonPress.bind(this))}>
                            <View style={{marginHorizontal:15,height:30,backgroundColor:'gray',borderRadius:15}} />
                        </TouchableHighlight>

                    </View>

                
            </View>
</TouchableWithoutFeedback>

        );



    }

        onButtonPress (){
            if(this.state.value.length>0){
                Alert.alert(this.state.value);
            }else{
                Alert.alert('请输入目标文字');
            }
            
        }
    
}

const styles=StyleSheet.create({
    style1:{
        backgroundColor:'#f0f0f0',
        marginTop:64,
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
    },


});