React Native 之 Touchable 介绍与使用

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

View 中的触摸属性 与 Touchable 的对比

• 学完之前的内容后，是不是有个疑问 —— 界面我们是搭建出来了，那为什么不会对用户的点击、触摸、拖拽做出反应？这篇就结合前面的内容加上小案例来解答疑惑
• 其实在 React Native 中，想实现手势监听很简单，有两种方式
  • 标签中有许多 on 开头的属性可以供我们使用，但是在不同标签上有的属性是不能做出相应的响应的，比如下面的例子,同样的属性，在View上不可使用，在Text上就可以
    
    
    

  var textInputTest = React.createClass({
          render(){ return(
                  <View style={styles.container}>
                      {/* 实例化一个View */}
                      <View style={styles.testViewStyle} onPressIn={() => {alert('点击')}}>
                      </View>
                      {/* 实例化一个Text */}
                      <Text style={styles.testTextStyle} onPress={() => {alert('点击')}}></Text>
                  </View>
              );
          }
      }); var styles = StyleSheet.create({
          container: {
              flex:1,
              backgroundColor:'gray' },
  
          testViewStyle: { // 设置尺寸 width:width,
              height:40,
              marginTop:20, // 设置背景颜色 backgroundColor:
          
  		
  
          		
  网友评论
       		
  				
  
  			
  			
  			
  		
  		
  		
      	
      	
          	
  
          		
  更多精彩分享
          		
  
          			
          		
          			
  	        		
  	        		学习是年轻人改变自己的最好方式