rn 图片组件、滚动条组件

图片组件
	<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
		
	加载模式
		在样式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,
    }
})