RN之获取屏幕宽高与scrollView的其他属性

alltolove

首先把几张图片放进新建的img文件夹里（图片的文件名要与代码里相符），然后写入以下代码：

1. import React from 'react';
   
2. import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
   
3. 
   
4. class Img1 extends React.Component{
   
5.   render(){
   
6.     return(
   
7.       <View>
   
8.         <Image  ref={(aaa)=>{this.m=aaa}}
   
9.         style={styles.img} source={this.props.mydata} />
   
10.         <Text style={{zIndex: 2,fontSize: 25}}>{this.props.a}</Text>
    
11.       </View>
    
12.     )
    
13.   }
    
14. }
    
15. 
    
16. export default class App extends React.Component {
    
17.   constructor(props) {
    
18.     super(props);
    
19.   
    
20.     this.state = {a:0};
    
21.   }
    
22.   render() {
    
23.     return (
    
24.       <View style={styles.container}>
    
25.         <ScrollView horizontal={true}
    
26.         pagingEnabled={true}
    
27.         showsHorizontalScrollIndicator={false}
    
28.         onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}>
    
29.         <Img1 mydata={require('./img/0.jpg')} a={this.state.a}/>
    
30.         <Img1 mydata={require('./img/1.jpg')} a={this.state.a}/>
    
31.         <Img1 mydata={require('./img/2.jpg')} a={this.state.a}/>
    
32.         <Img1 mydata={require('./img/3.jpg')} a={this.state.a}/>
    
33.         <Img1 mydata={require('./img/4.jpg')} a={this.state.a}/>
    
34.         <Img1 mydata={require('./img/5.jpg')} a={this.state.a}/>
    
35.         <Img1 mydata={require('./img/6.jpg')} a={this.state.a}/>
    
36.         </ScrollView>
    
37.       </View>
    
38.     );
    
39.   }
    
40.   onAnimationEnd(e){
    
41.     let f=e.nativeEvent.contentOffset.x
    
42.     let a=Math.floor(f / 400)
    
43.     this.setState({a})
    
44.   }           
    
45. }
    
46. 
    
47. var {height, width} = Dimensions.get('window');
    
48. const styles = StyleSheet.create({
    
49.   container: {
    
50.     flex: 1,
    
51.     backgroundColor: '#fff',
    
52.     flexDirection: 'row',
    
53.     justifyContent:'flex-start',
    
54.     flexWrap: 'wrap',
    
55.   },
    
56.   img:{
    
57.     width: width,
    
58.     height: height-40,
    
59.   },
    
60. });
    

复制代码

这其实就是自己做一个翻页效果的手机相册，其中scrollView里面的几个属性分别为：设置为横向滚动；翻页效果；把滚动条去掉；每次翻页结束计算累计屏幕宽度
第47行代码是获取屏幕宽高，提前要把Dimension控件import进来。效果图：