[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

相关推荐
不想有bug的小菜鸟5 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238636 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559607 分钟前
前端代理,解决跨域问题讲解
前端
quitv12 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238120 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星22 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-42 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3