Using a ScrollView - RN4

时间:2024-04-23 13:01:33

使用滚动条。

1. import

import {ScrollView} from "react-native";

2. Using

      <ScrollView>
...
</ScrollView>

3. src

import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView } from 'react-native'; export default class App extends React.Component {
render() {
return (
<ScrollView>
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
</View>
</ScrollView>
);
}
} const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Reference:

1. Using a ScrollView