图像滑块上方具有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 内。