在React-native中滚动视图偏移无法正常工作

时间:2017-04-13 03:25:53

标签: react-native-android

我想在屏幕上的clik on按钮时更新偏移量。我尝试了很多次但是没有得到这个代码在下面给出

import React, { Component } from 'react';
import { AppRegistry,Alert,ScrollView, Image, Dimensions, Text,View,TouchableOpacity,StyleSheet} from 'react-native'
class Pagination extends Component {
   count() {
    this.refs._scrollView.scrollProperties.contentOffset.x=this.refs._scrollView.scrollProperties.contentOffset.x+{width:Dimensions.get('window').width*1.00};
  } 
  render() {
      return (
        <ScrollView  ref={(scrollView) => { _scrollView = scrollView; }} horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} onScroll={this.handleScroll}>
          <View
          style={{backgroundColor: '#3498db',width:Dimensions.get('window').width*1.00, height:Dimensions.get('window').height*1.00}}
          >
          < Image source={require('./flag/f1.jpg')}
           />
           <Text style={{padding:20,fontSize:30}}>Page1</Text>
             <TouchableOpacity onPress={()=>{this.count()}}
               >
           <View style={styles.ForwardOrBackward}>
           <Image
             style={styles.button}
              source={require('./flag/arrow.png')}
              />
              </View>
          </TouchableOpacity>
           </View>
           <View
           style={{backgroundColor: '#e67e22',width:Dimensions.get('window').width*1.00, height:Dimensions.get('window').height*1.00}}
           >
          <Image source={require('./flag/f1.jpg')} />
          <Text style={{padding:20,fontSize:30}}>Page2</Text>
            <TouchableOpacity onPress={()=>{this.count()} }>
           <View style={styles.ForwardOrBackward}>
           <Image
             style={styles.button}
              source={require('./flag/arrow.png')}
              />
              </View>
          </TouchableOpacity>
          </View>
          <View
          style={{backgroundColor: '#f39c12', width:Dimensions.get('window').width*1.00, height:Dimensions.get('window').height*1.00}}
          >
          <Image source={require('./flag/f1.jpg')} />
          <Text style={{padding:20,fontSize:30}}>Page3</Text>
            <TouchableOpacity onPress={()=>{this.count()} } >
           <View style={styles.ForwardOrBackward}>
           <Image
             style={styles.button}
              source={require('./flag/arrow.png')}
              />
              </View>
          </TouchableOpacity>
          </View>
          <View
          style={{backgroundColor: '#1abc9c',width:Dimensions.get('window').width*1.00, height:Dimensions.get('window').height*1.00}}
          >
          <Image source={require('./flag/f1.jpg')} />
          <Text style={{padding:20,fontSize:30}}>Page4</Text>
            <TouchableOpacity onPress={()=>{this.count()} } >
          <View style={styles.ForwardOrBackward}>
           <Image
             style={styles.button}
              source={require('./flag/arrow.png')}
              />
              </View>
          </TouchableOpacity>
          </View>
          <View
          style={{backgroundColor: '#8e44ad', width:Dimensions.get('window').width*1.00, height:Dimensions.get('window').height*1.00}}
          >
          <Image source={require('./flag/f1.jpg')} />
          <Text style={{padding:20,fontSize:30}}>Page5</Text>
          <View style={styles.ForwardOrBackward}>
            <TouchableOpacity onPress={()=>{this.count()} } >
           <Image
             style={styles.button}
              source={require('./flag/arrow.png')}
              />
          </TouchableOpacity>
          </View>
          </View>
        </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  button :{
    height:60,
    width:60,
    borderRadius:30,
    alignItems:'center',
    justifyContent:'center'
  },
  ForwardOrBackward:{
    alignItems:'center',
    justifyContent:'center' 
  }
});
AppRegistry.registerComponent('Pagination', () => Pagination);

这是一个可触摸的不透明度按钮,我想在点击按钮时移动页面但是当点击按钮这个功能调用时此页面不会移动到下一页

count() {
        this.refs._scrollView.scrollProperties.contentOffset.x=this.refs._scrollView.scrollProperties.contentOffset.x+{width:Dimensions.get('window').width*1.00};
      }

检查此函数中的语法错误

0 个答案:

没有答案