时间戳

首页 > 解决方案 > react-native-image-slider-box 与图像上方的 dotStyle 滑块不起作用

react-native - react-native-image-slider-box 与图像上方的 dotStyle 滑块不起作用

问题描述

在这个例子中，我在这里使用了 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,
              padding: 0,
              margin: 0,
              backgroundColor: "rgba(128, 128, 128, 0.92)"
            }}
            ImageComponentStyle={{borderRadius: 15, width: '97%', marginTop: 25}}
        />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

如果您有任何解决方案，请提出任何建议。谢谢。图像滑块框下方左侧的图像更改分页..

标签： react-nativereact-native-image

解决方案

Windas_Coder！我不确定我是否明白了，但我的理解是你想将分页点移动到内容框的左下角。一个简单的方法是设置alignSelf到flex-start属性内部paginationBoxStyle。像这样的东西：

paginationBoxStyle={{
        alignSelf: "flex-start",
 }}

因此，您可以在此处阅读更多信息，您可以：

将此属性应用于单个子项以更改其在其父项中的对齐方式。

或者换句话说，只改变分页框的位置，在SliderBoxusingflex属性内。

推荐阅读