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

什么是touchable组件

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

Touchable Highlight 触碰高亮

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

import {Text, View, ScrollView, StyleSheet, TextInput, Dimensions, Button, TouchableHighlight} from 'react-native'

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

//创建标签
<View style={[styles.container]}>  
    <TouchableHighlight onPress = {() => console.log('触碰高亮显示')}>  
        <View style={[styles.item]} ><Text>触碰高亮</Text></View>  
    </TouchableHighlight>  
</View>

//添加样式
const styles = StyleSheet.create({  
    container:{  
        flex:1,  
        justifyContent:'center',  
        alignItems:'center'  
    },  

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

效果如图

Touchable Opacity + 无响应

引入组件

TouchableOpacity, TouchableWithoutFeedback

//添加标签
<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 组件

//模拟滑动
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>  
    )  
    }  
}

//样式
const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'center',  
alignItems:'center'  
},  
  
text:{  
fontSize:30  
}  
})

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

//标签
<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>

const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'center',  
alignItems:'center'  
},  
  
text:{  
fontSize:30  
},  
  
  
scrlview:{  
backgroundColor:'#ddd',  
marginHorizontal:20  
}  
})

设置水平滚动

//水平滚动
<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>

//样式 nav
nav:{  
    margin:10,  
    height:50,  
    fontSize:30  
}

safeAreaView