我创建了一个包含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;