rn 图片组件Image、滚动条组件ScrollView

淡淡的烟草味﹌ 2021-07-24 16:18 823阅读 0赞

图片组件
    	<Image />
    	
    	属性:
    		1、加载本地图片:source={require('路径')}
    			其中:
    			(1)require的参数必须为字符串或者字符串常量,不能是字符串变量(如对象.的形式);
    			(2)循环引入多个图片写法:
    			const img_arr = [require('./my-img-1.png'),require('./my-img-2.png'),require('./my-img-3.png')]
    			
    		2、加载网络图片:source={
       {uri:'路径'}}   uri不是url
    		
    		3、blurRadius={n};  //设置图片模糊度npx
    		
    	加载模式
    		在样式style中设置
    			resizeMode:'cover'/'contain图片缩放到正好放进来'/'stretch图片拉伸到指定大小'
    
    	样式:
    		必须设置宽度
    		
    滚动条组件
    	设置了该组件才会有滚动条出现
    	会默认撑满父元素,故通过父元素设置宽高
    	可以用来设置导航条
    	
    	缺点:会将其中的内容一次性渲染完
    	
    	<ScrollView>...</ScrollView>
    	
    	属性
    	horizontal={true}   //水平排列,默认为数值
    	pagingEnabled={true}  //自动分页
    	showsHorizontalScrollIndicator={true/false}  //是否显示水平方向滚动条
    	onScroll={this.回调}  //每滑动一帧会执行一次,可通过，调用的频率可以用scrollEventThrottle属性来控制
    	contentContainerStyle={
       {样式}}  //会将ScrollView中的所有元素放在该容器内，主轴方向和js一样

代码示例:

import React,{ Component} from 'react'
    import { View,Text,Image,ScrollView} from 'react-native'
    
    export default class Img extends Component{ 
    
        render()
        { 
            return(
                <>
                    <ScrollView>
                        <Image 
                            source={ require('./img/钢铁侠4.jpg')}
                        />
                        <Image
                            style={ { height:100,width:100,margin:10}}
                            source={ { uri:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4016333918,4269266815&fm=26&gp=0.jpg'}}
                        />
                        <Image
                            // resizeMod:'contain按照正常比例缩放正好能够放进来'、'cover'、'stretch图片拉伸到指定大小'
                            style={ { height:200,width:200,margin:10,resizeMode:'contain'}}
                            source={ require("./img/钢铁侠4.jpg")}
                        />
                        <Image
                            // resizeMod:'contain按照正常比例缩放正好能够放进来'、'cover'、'stretch图片拉伸到指定大小'
                            style={ { height:200,width:200,margin:10,resizeMode:'contain'}}
                            source={ require("./img/钢铁侠4.jpg")}
                        />
                    </ScrollView>
    
                </>
            )
        }
    }

示例2:

import React,{ Component} from 'react'
    import { Text,View,ScrollView,StyleSheet, Alert,Dimensions,Navigator,Image} from 'react-native'
    
    export default class App extends Component{ 
    
        render(){ 
            return(
                <>
                <View>
                    <ScrollView
                    horizontal={ true}
                    // onScroll={this.f}
                    style={ style.scroll}
                    >
                        <Text style={ style.word}>首页</Text>
                        <Text style={ style.word}>新闻</Text>
                        <Text style={ style.word}>娱乐</Text>
                        <Text style={ style.word}>游戏</Text>
                        <Text style={ style.word}>音乐</Text>
                        <Text style={ style.word}>音乐</Text>
    
                    </ScrollView>
                    </View>
                </>
            )
        }
    
        f(){ 
            // console.log("22");
        }
    
    }
    
    const style=StyleSheet.create({ 
        word:{ 
            fontSize:30,
            color:'rgba(0,0,0,0.5)',
            paddingLeft:10,
            lineHeight:70
    
        },
        scroll:{ 
            borderWidth:2,
            borderColor:'blue',
            borderStyle:'solid',
            height:70,
        }
    })