React Native，更改react-native-community/slider和拇指图标的高度

Question

我用于@react-native-community/slider我的应用程序，但我面临一个问题，它的高度没有改变，它的宽度在改变，但高度没有改变，有人知道为什么吗？而且我想渲染滑块的值，就像滑块拇指内的蓝色容器一样，有没有办法做到这一点？请帮忙

这是我的滑块代码

<View>
          <Text style={[style.fontSize15Med, styles.font15]}>
            Number of surveys
          </Text>
          <View style={styles.daysCont}>
            <Text style={[style.fontSize12Med, styles.surveys]}>
              {this.state.surveys}
            </Text>
          </View>
          <Slider
            style={{width: 320, height: 30, marginLeft: 40}}
            minimumValue={0}
            maximumValue={10}
            step={1}
            maximumTrackTintColor={colors.DarkBlue}
            minimumTrackTintColor={colors.primary}
            thumbTintColor={colors.skyBlue}
            value={this.state.surveys}
            onValueChange={(val) => this.setState({surveys: val})}
          />
        </View>

Answer 1

至于 2022 年 3 月，没有可以更改滑块厚度的属性，但有一些解决方法选项。

1. 使用scaleY CSS样式：transform: [{ scaleY: 2 }]

<Slider
  style={{ width: 320, transform: [{ scaleY: 2 }] }}
  ...
/>

此示例将使滑块厚度加倍。缺点是增加了旋钮按钮。

2. 使用替代滑块：

   https://github.com/miblanchard/react-native-slider

3. 使用 View 组件创建一个假滑块，并将其放置在实际滑块上： /sf/answers/3307251741/

Answer 2

您可以使用自定义拇指图像，例如

const thumbImage = require('shared/img/slider-thumb.png');

<Slider
   .......
   thumbImage={thumbImage}
   style={{width: 200, height: 40}} // height, width
/>

更多信息可在此处找到