什么是touchable组件
- touchable Highlight 触碰后,高亮显示
- Touchable Opacity 触碰后,透明度降低(模糊显示)
- 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
