[react-native] 09 touchable组件 + 滚动视图

什么是touchable组件

  1. touchable Highlight 触碰后,高亮显示
  2. Touchable Opacity 触碰后,透明度降低(模糊显示)
  3. Touchable Without Feedback 触碰后,无任何响应

Touchable Highlight 触碰高亮

首先我们引入 TouchableHighlight 进我们的 index.js 文件

js 复制代码
import {Text, View, ScrollView, StyleSheet, TextInput, Dimensions, Button, TouchableHighlight} from 'react-native'

创建 TouchableHighlight 标签,添加些许样式

js 复制代码
//创建标签
<View style={[styles.container]}>  
    <TouchableHighlight onPress = {() => console.log('触碰高亮显示')}>  
        <View style={[styles.item]} ><Text>触碰高亮</Text></View>  
    </TouchableHighlight>  
</View>
js 复制代码
//添加样式
const styles = StyleSheet.create({  
    container:{  
        flex:1,  
        justifyContent:'center',  
        alignItems:'center'  
    },  

    item:{  
        marginBottom:20,  
        padding:10,  
        borderWidth:1,  
        borderColor:'red'  
    }  
})

效果如图

Touchable Opacity + 无响应

引入组件

TouchableOpacity, TouchableWithoutFeedback

js 复制代码
//添加标签
<TouchableHighlight onPress = {() => alert('触碰高亮显示')}>  
    <View style={[styles.item]} ><Text>触碰高亮</Text></View>  
</TouchableHighlight>  
  
<TouchableOpacity onPress = {() => alert('触碰透明度变化')}>  
    <View style={[styles.item]} ><Text>触碰透明度变化</Text></View>  
</TouchableOpacity>  
  
<TouchableWithoutFeedback onPress = {() => alert('触碰无响应')}>  
    <View style={[styles.item]} ><Text>触碰无响应</Text></View>  
</TouchableWithoutFeedback>

触碰后

滚动视图

引入 ScrollView 组件

js 复制代码
//模拟滑动
render(){  
    return (  
        <ScrollView>  
            <Text style={[styles.text]}>  
                sdfgjspojgdiofjgpodkopvkmscmvknjnbsoineijorwijopdsmvkfnsjbng jiwjfopij dmfklmspwej opijgiojndfio;swj no;  
                ejwfoiae;nrgo aoierngiownoi nksjdnvnefnog nrgo  
                ojngoierngenknfkldsnvdfkslnlgenr oingoinwin knsmdklgndlkfngioenrgoienrklnmknglkerngioenriogjioenjgnoeg  
                ofiwjenroignoisndklvnlksmniovnomiowmnoirngiowneroijnwriognionjreiongoiqweniofnwiongfionieorngkoenthamq  
                powkepomfpomr oinoirne;aogiaejgPAWOjrtmq2j3nklfnmb  
                wpgmppwpkopekjmfoiwergjioerjfiomkonsoijdvioong omnopwjposfkowkpofgdiohgiorjt23ipewjg9posjfpo  
                iwejfipojgpoijp]kowpjefopppgwe87575798457wf68w684gwrg  
                weofhwoihgfiohneojgnvongoineoirnfodiasjfeiojwgoihnsoiv  
            </Text>  
        </ScrollView>  
    )  
    }  
}
js 复制代码
//样式
const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'center',  
alignItems:'center'  
},  
  
text:{  
fontSize:30  
}  
})

给 scrollview 添加样式,常用的几个属性

js 复制代码
//标签
<ScrollView  
    style={[styles.scrlview]}  
    contentContainerStyle={{margin:30}}> 
    
    <Text style={[styles.text]}>  
        sdfgjspojgdiofjgpodkopvkmscmvknjnbsoineijorwijopdsmvkfnsjbng jiwjfopij dmfklmspwej opijgiojndfio;swj no;  
        ejwfoiae;nrgo aoierngiownoi nksjdnvnefnog nrgo  
        ojngoierngenknfkldsnvdfkslnlgenr oingoinwin knsmdklgndlkfngioenrgoienrklnmknglkerngioenriogjioenjgnoeg  
        ofiwjenroignoisndklvnlksmniovnomiowmnoirngiowneroijnwriognionjreiongoiqweniofnwiongfionieorngkoenthamq  
        powkepomfpomr oinoirne;aogiaejgPAWOjrtmq2j3nklfnmb  
        wpgmppwpkopekjmfoiwergjioerjfiomkonsoijdvioong omnopwjposfkowkpofgdiohgiorjt23ipewjg9posjfpo  
        iwejfipojgpoijp]kowpjefopppgwe87575798457wf68w684gwrg  
        weofhwoihgfiohneojgnvongoineoirnfodiasjfeiojwgoihnsoiv  
    </Text>  
</ScrollView>
js 复制代码
const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'center',  
alignItems:'center'  
},  
  
text:{  
fontSize:30  
},  
  
  
scrlview:{  
backgroundColor:'#ddd',  
marginHorizontal:20  
}  
})

设置水平滚动

js 复制代码
//水平滚动
<View>  
    <ScrollView style={{backgroundColor:'#dfb'}} horizontal={true} >  
        <Text style={[styles.nav]} > 新闻 </Text>  
        <Text style={[styles.nav]} > 体育 </Text>  
        <Text style={[styles.nav]} > 财经 </Text>  
        <Text style={[styles.nav]} > 娱乐 </Text>  
        <Text style={[styles.nav]} > 科技 </Text>  
        <Text style={[styles.nav]} > 军事 </Text>  
    </ScrollView>  

    <ScrollView style={[styles.scrlview]} contentContainerStyle={{margin:30}}>  
        <Text style={[styles.text]}>  
            sdfgjspojgdiofjgpodkopvkmscmvknjnbsoineijorwijopdsmvkfnsjbng jiwjfopij dmfklmspwej opijgiojndfio;swj no;  

        </Text>  
    </ScrollView>  
</View>
js 复制代码
//样式 nav
nav:{  
    margin:10,  
    height:50,  
    fontSize:30  
}

safeAreaView

相关推荐
@大迁世界6 分钟前
构建 Next.js 应用时的安全保障与风险防范措施
开发语言·前端·javascript·安全·ecmascript
IT、木易1 小时前
ES6 新特性,优势和用法?
前端·ecmascript·es6
计算机软件程序设计2 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
指尖时光.2 小时前
【前端进阶】01 重识HTML,掌握页面基本结构和加载过程
前端·html
前端御书房2 小时前
Pinia 3.0 正式发布:全面拥抱 Vue 3 生态,升级指南与实战教程
前端·javascript·vue.js
NoneCoder2 小时前
JavaScript系列(84)--前端工程化概述
前端·javascript·状态模式
晚安7202 小时前
idea添加web工程
java·前端·intellij-idea
零凌林3 小时前
vue3中解决组件间 css 层级问题最佳实践(Teleport的使用)
前端·css·vue.js·新特性·vue3.0·teleport
糟糕好吃3 小时前
用二进制思维重构前端权限系统
前端
拉不动的猪4 小时前
刷刷题17(webpack)
前端·javascript·面试