React Native各个控件笔记

输入框

 import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

export default class test2 extends Component {
  render() {
    return (
            <View style={styles.container}>
            <TextInput style={styles.inputStyle}
            //value={'我是默认文字'}
            keyboardType={'phone-pad'}
            //多行显示
            //multiline={true}
            //密码 明文 多行的时候不适用
            //password={true}
            //占位文字
            placeholder={'占位文字'}
            clearButtonMode={'always'}
            />
            
            </View>
            );
  }
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
inputStyle: {
width:300,
height:80,
marginTop:30,
  //backgroundColor:'black',
borderWidth:1,
borderColor:'#e8e8e8'
},
  
});

AppRegistry.registerComponent('test2', () => test2);

TouchableOpacity
添加触摸,点击事件

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AlertIOS,
  TouchableOpacity
} from 'react-native';

var test3 = React.createClass({
  getInitialState(){
    return{
    title:'不透明触摸'
    }
  },
  
  render() {
    return (
            <View style={styles.container} >
            <TouchableOpacity
            activeOpacity={0.5}
            onPress={()=>this.activeEvent('点击')}
            onPressIn={()=>this.activeEvent('按下')}
            onPressOut={()=>this.activeEvent('抬起')}
            onLongPress={()=>this.activeEvent('长按')}
            >
            <View style={styles.aaa}>
            <Text> 常用事件</Text>
            
            </View>
            </TouchableOpacity>
            
            <View>
            <Text>{this.state.title}</Text>
            </View>
            
            
            
            </View>
            
            );
  },
  
  activeEvent(event){
    this.setState({
    title:event
    })
  },  
  
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容