自定义 React Native 滑块
Custom React Native Slider
有谁知道如何像下面这样在 react-native 中渲染带有不同部分的滑块?到目前为止,只见过一根线和一个点的滑块。
您可以使用 LayoutAnimation 来实现这种类型的滑块。找到下面的代码来完成它。
import React, { useState } from 'react';
import {Button,LayoutAnimation,Platform,StyleSheet,Text,UIManager,View} from 'react-native';
if (Platform.OS === 'android') {
if (UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
const step = ['1', '2', '3', '4', '5', '6', '7'];
const activeColor = '#444';
export default function TrackingStatus() {
const [activeIndex, setActive] = useState(0);
const setActiveIndex = (val) => {
LayoutAnimation.easeInEaseOut();
setActive(val);
};
const marginLeft = (100 / (step.length - 1)) * activeIndex - 100 + '%';
return (
<View style={styles.constainer}>
<Text style={styles.prop}>{activeIndex}</Text>
<View style={styles.statusContainer}>
<View style={styles.line}>
<View style={[styles.activeLine, { marginLeft }]} />
</View>
{step.map((step, index) => (
<View style={[styles.dot]} key={step}>
<View
style={[
index <= activeIndex
? { height: '100%', width: '100%' }
: { height: '0%', width: '0%' },
{ backgroundColor: activeColor, borderRadius: 20 },
]}
/>
</View>
))}
</View>
<View style={styles.btns}>
<Button
title="prev"
onPress={() => setActiveIndex(activeIndex - 1)}
disabled={activeIndex <= 0}
/>
<Button
title="next"
onPress={() => setActiveIndex(activeIndex + 1)}
disabled={activeIndex >= step.length - 1}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
constainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 30,
},
statusContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
height: 70,
justifyContent: 'space-between',
},
dot: {
height: 15,
width: 15,
borderRadius: 10,
backgroundColor: '#ccc',
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
},
line: {
height: 5,
width: '100%',
backgroundColor: '#ccc',
position: 'absolute',
borderRadius: 5,
overflow: 'hidden',
},
activeLine: {
height: '100%',
width: '100%',
backgroundColor: activeColor,
borderRadius: 5,
},
btns: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 20,
},
prop: {
marginBottom: 20,
width: 100,
textAlign: 'center',
},
});
在上面的代码中,我们只是根据需要创建一个 UI 克隆并添加 margin-left 以及用颜色填充点。在改变 margin-left 和圆点颜色的状态之前,我们添加了布局动画来为进度添加动画效果。
输出
我希望这个解释能帮助你理解工作
有谁知道如何像下面这样在 react-native 中渲染带有不同部分的滑块?到目前为止,只见过一根线和一个点的滑块。
您可以使用 LayoutAnimation 来实现这种类型的滑块。找到下面的代码来完成它。
import React, { useState } from 'react';
import {Button,LayoutAnimation,Platform,StyleSheet,Text,UIManager,View} from 'react-native';
if (Platform.OS === 'android') {
if (UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
const step = ['1', '2', '3', '4', '5', '6', '7'];
const activeColor = '#444';
export default function TrackingStatus() {
const [activeIndex, setActive] = useState(0);
const setActiveIndex = (val) => {
LayoutAnimation.easeInEaseOut();
setActive(val);
};
const marginLeft = (100 / (step.length - 1)) * activeIndex - 100 + '%';
return (
<View style={styles.constainer}>
<Text style={styles.prop}>{activeIndex}</Text>
<View style={styles.statusContainer}>
<View style={styles.line}>
<View style={[styles.activeLine, { marginLeft }]} />
</View>
{step.map((step, index) => (
<View style={[styles.dot]} key={step}>
<View
style={[
index <= activeIndex
? { height: '100%', width: '100%' }
: { height: '0%', width: '0%' },
{ backgroundColor: activeColor, borderRadius: 20 },
]}
/>
</View>
))}
</View>
<View style={styles.btns}>
<Button
title="prev"
onPress={() => setActiveIndex(activeIndex - 1)}
disabled={activeIndex <= 0}
/>
<Button
title="next"
onPress={() => setActiveIndex(activeIndex + 1)}
disabled={activeIndex >= step.length - 1}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
constainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 30,
},
statusContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
height: 70,
justifyContent: 'space-between',
},
dot: {
height: 15,
width: 15,
borderRadius: 10,
backgroundColor: '#ccc',
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
},
line: {
height: 5,
width: '100%',
backgroundColor: '#ccc',
position: 'absolute',
borderRadius: 5,
overflow: 'hidden',
},
activeLine: {
height: '100%',
width: '100%',
backgroundColor: activeColor,
borderRadius: 5,
},
btns: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 20,
},
prop: {
marginBottom: 20,
width: 100,
textAlign: 'center',
},
});
在上面的代码中,我们只是根据需要创建一个 UI 克隆并添加 margin-left 以及用颜色填充点。在改变 margin-left 和圆点颜色的状态之前,我们添加了布局动画来为进度添加动画效果。
输出
我希望这个解释能帮助你理解工作