如何解决图像滑块上方具有dotStyle的react-native-image-slider-box不起作用
在此示例中,我在这里使用了react-native-image-slider,我想在左侧底部图像滑块框中显示图像分页点。
SliderBoxExample.js
import React,{ Component } from 'react';
import {Image,Text,View,TouchableOpacity,StyleSheet } from 'react-native';
import { SliderBox } from "react-native-image-slider-Box";
export default class SliderBoxExample extends Component {
constructor(props) {
super(props);
this.state = {
images: [
require('./../assets/images/cat.jpg'),require('./../assets/images/dao.jpg'),require('./../assets/images/monkey.jpg'),]
};
}
render() {
const { navigation } = this.props
return (
<View style={styles.container}>
<SliderBox
ImageComponent={Image}
images={this.state.images}
sliderBoxHeight={200}
dotColor="red"
inactiveDotColor="#90A4AE"
paginationBoxVerticalPadding={20}
autoplay
circleLoop
resizeMethod={'resize'}
resizeMode={'cover'}
paginationBoxStyle={{
position: "absolute",bottom: 0,padding: 0,alignItems: "center",alignSelf: "center",justifyContent: "center",paddingVertical: 10
}}
dotStyle={{
width: 10,height: 10,borderRadius: 5,marginHorizontal: 0,margin: 0,backgroundColor: "rgba(128,128,0.92)"
}}
ImageComponentStyle={{borderRadius: 15,width: '97%',marginTop: 25}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,},});
建议任何解决方案(如果有)。 谢谢。 图像更改分页位于图像滑块框下方的左侧。
解决方法
Windas_Coder!我不确定我是否明白,但我明白您想将分页点移动到内容框的左下角。一种简单的方法是在属性 alignSelf
内将 flex-start
设置为 paginationBoxStyle
。类似的东西:
paginationBoxStyle={{
alignSelf: "flex-start",}}
当您可以阅读有关 here 的更多信息时,您可以:
将此属性应用于单个子项以更改其在其父项中的对齐方式。
或者换句话说,使用 SliderBox
属性仅更改分页框的位置,在 flex
内。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。