ScrollView滚动回到顶部

时间:2019-09-13 19:27:19

标签: react-native

我创建了一个包含2个项目的行,当我添加更多行时,屏幕变小。添加scrollview后,可以滚动,但是当我松开屏幕的手指时,它将自动滚动到顶部。有没有可能让它保持在原位置?

我已经按照本教程https://www.youtube.com/watch?v=riWf6CtFkUA和堆栈溢出的一些问题进行了学习。我使用的版本是:“ react-native”:“ 0.59.2”,

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button,ImageBackground, StatusBar, ScrollView, Dimensions} from 'react-native';
import { Header, Icon } from 'react-native-elements';



class homeScreen extends Component {


    render() {
      return (
        <ScrollView >
        <ImageBackground source={require('./assets/images/all/background-app.jpg')} style={styles.container}>
             <StatusBar barStyle="light-content"/>
          <Header
            statusBarProps={{ barStyle: 'light-content' }}
            barStyle="light-content" // or directly
            centerComponent={<Image source={require('./assets/images/header/logo-coffeesnipe.png')} />}

            containerStyle={{
              backgroundColor: '#7E4338',
              justifyContent: 'space-around',
            }}
          />

      <View>
        <View style={styles.homeHead}>
          <ImageBackground source={require('./assets/images/header/home-coffee.jpg')} style={styles.headers}>
               <View style={styles.overlayHeaderColor}>
                  <Text style={styles.headerText}>Trek in een bakkie?</Text>
               </View>
           </ImageBackground>
        </View>
        <View style={{flexDirection: 'row', flex: 1}}>
          <View style={styles.homeButtons}>


              <Text style={styles.homeText}>Aanbiedingen</Text>
          </View>
          <View style={styles.homeButtons}>
              <Text style={styles.homeText}>Best beoordeeld</Text>
          </View>

        </View>

        <View style={styles.snipes}>
          <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-dummy.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Coffeelovers</Text>
                  <Text style={styles.overlayTextSub}>Maastricht</Text>
                  <Text style={styles.overlayTextSub}>Meer ></Text>
               </View>
           </ImageBackground>
           </View>
           <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-barberistas.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Barberistas</Text>
                  <Text style={styles.overlayTextSub}>Geleen</Text>
               </View>
           </ImageBackground>
           </View>
           <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-barberistas.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Barberistas</Text>
                  <Text style={styles.overlayTextSub}>Geleen</Text>
               </View>
           </ImageBackground>
           </View>

           <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-barberistas.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Barberistas</Text>
                  <Text style={styles.overlayTextSub}>Geleen</Text>
               </View>
           </ImageBackground>
           </View>

           <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-barberistas.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Barberistas</Text>
                  <Text style={styles.overlayTextSub}>Geleen</Text>
               </View>
           </ImageBackground>
           </View>
           <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-barberistas.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Barberistas</Text>
                  <Text style={styles.overlayTextSub}>Geleen</Text>
               </View>
           </ImageBackground>
           </View>
           <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-barberistas.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Barberistas</Text>
                  <Text style={styles.overlayTextSub}>Geleen</Text>
               </View>
           </ImageBackground>
           </View>
           <View style={styles.snipe}>
           <ImageBackground source={require('./assets/snipes/coffeesnipe-barberistas.jpg')} style={ {width: '100%',height: '100%', flex: 2, borderWidth: 1,borderColor: '#fff', }}>
               <View style={styles.overlayColor}>
                  <Text style={styles.overlayText}>Barberistas</Text>
                  <Text style={styles.overlayTextSub}>Geleen</Text>
               </View>
           </ImageBackground>
           </View>




        </View>

        </View>

      </ImageBackground>
      </ScrollView>

      );
    }
  }

  const styles = StyleSheet.create({
    contentContainer:{
      flex: 1
  },
    container: {

      marginTop: Platform.OS === 'ios' ? 0 : - 30,
      backgroundColor: '#F5FCFF',
    },
    headerAll:{
      backgroundColor: '#7E4338',
    },
    homeHead:{
      height: 180,
      width: '100%',
    },
    headers:{
      flex: 1,

    },
    homeButtons:{
      backgroundColor: '#fff',
      height: 100,
      width:'50%',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      borderWidth: 0.5,
      borderColor: '#d6d7da',
      bottom: 0,
    },  
    homeText:{
      textAlign: 'center',
      textAlignVertical: 'center',
    },
    overlayHeaderColor:{
      backgroundColor: 'rgba(126,67,56,0.6)',
      height: '100%',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    overlayColor:{
      backgroundColor: 'rgba(0,0,0,0.6)',
      height: '100%',

      justifyContent: 'center',
      alignItems: 'center',
    },
   headerText:{
      color: '#fff',  
      textAlign: 'center',
      textAlignVertical: 'center',
      fontWeight: '200',
      fontStyle: 'italic',

    },

    overlayText:{
      color: '#fff',  
      textAlign: 'center',
      textAlignVertical: 'center',

      fontWeight: '800'
    },
    overlayTextSub:{
      color: '#fff',  
      textAlign: 'center',
      textAlignVertical: 'center',

      fontWeight: '400'
    },
    snipes:{

      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'flex-start',   
    },
    snipe:{
      width: '50%',

    },  
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
      marginTop: 50,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 15,
    },
    button: {

    }
  });

  export default homeScreen;

0 个答案:

没有答案