使用ScrollView替代View可以实现安全范围内的滚动
showsVerticalScrollIndicator隐藏滚动条
<ScrollView showsVerticalScrollIndicator={false}></ScrollView>
制作轮播图
import {
View,
Text,
StatusBar,
SafeAreaView,
StyleSheet,
ScrollView,
Image,
Dimensions,
} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const App = () => {
const scrollRef = useRef();
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
//初始化后,页面渲染完,立即滚动到真正的第一页
setTimeout(() => {
scrollRef.current.scrollTo({x: screenWidth, y: 0, animated: false});
}, 0);
}, [scrollRef]);
useEffect(() => {
scrollRef.current.currentIndex = currentIndex;
}, [currentIndex, scrollRef]);
//定时器,定时滚动
useEffect(() => {
console.log('初始化了定时器');
setInterval(() => {
const offset = screenWidth * (scrollRef.current.currentIndex + 2);
scrollRef.current.scrollTo({x: offset, y: 0, animated: true});
}, 3000);
}, [scrollRef]);
const scrollEnd = useCallback(event => {
let index = event.nativeEvent.contentOffset.x / screenWidth;
// index = Math.round(index);
// console.log(index);
if (index === 0) {
setCurrentIndex(() => 3);
//这是最后一页,应该去到真实的最后一页
const offset = screenWidth * images.length;
scrollRef.current.scrollTo({x: offset, y: 0, animated: false});
} else if (index === 5) {
setCurrentIndex(() => 0);
//这是第一页
const offset = screenWidth;
scrollRef.current.scrollTo({x: offset, y: 0, animated: false});
} else {
setCurrentIndex(() => index - 1);
}
}, []);
return (
<>
<StatusBar />
<SafeAreaView style={S.container}>
<Header />
<View style={S.content}>
<View style={S.scroll}>
<ScrollView
ref={scrollRef}
alwaysBounceVertical={false}
contentContainerStyle={S.scrollWrap}
onMomentumScrollEnd={scrollEnd}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}>
{/* 假的最后一张 */}
<Image style={S.image} source={{uri: images[3]}} />
{/* 真实的内容 */}
{images.map((item, index) => (
<Image key={index} style={S.image} source={{uri: item}} />
))}
{/* 假的第一张 */}
<Image style={S.image} source={{uri: images[0]}} />
</ScrollView>
</View>
<Text style={{fontSize: 100}}>{currentIndex}</Text>
</View>
</SafeAreaView>
</>
);
};
样式:
const S = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f1f1f1',
overflow: 'hidden',
},
content: {
flex: 1,
backgroundColor: 'red',
},
scroll: {
width: '100%',
height: 200,
backgroundColor: '#fff',
},
scrollWrap: {
width: '600%',
height: 200,
flexDirection: 'row',
},
image: {
width: (1 / 6) * 100 + '%',
height: 200,
},
});