React Native 中的滑块切换按钮？

Question

我想将这些滑块切换按钮之一添加到我的 React 本机应用程序中。有什么简单的方法可以做到这一点而无需从头开始？

Answer 1

使用本机基础选项卡，然后对其进行自定义。

这个link会对你有帮助

https://docs.nativebase.io/Components.html#tabs-def-headref

Answer 2

这是一个基本示例，说明如何使用 Animated API。

  import React from 'react';
  import {
    Animated,
    Easing,
    StyleSheet,
    Pressable,
    View,
    Text,
  } from 'react-native';

  const App = () => {
    const animatedValue = React.useRef(new Animated.Value(0)).current;

      const startAnimation = (toValue) => {
        Animated.timing(animatedValue, {
          toValue,
          duration: 400,
          easing: Easing.linear,
          useNativeDriver: false,
        }).start();
      };

      const left = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['2%', '50%'],
        extrapolate: 'clamp',
      });

      const scale = animatedValue.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: [1, 0.9, 1],
        extrapolate: 'clamp',
      });

      return (
        <View style={styles.container}>
          <View style={styles.sliderContainer}>
            <Animated.View style={[styles.slider, { left }]} />
            <Pressable
              style={styles.clickableArea}
              onPress={startAnimation.bind(null, 0)}>
              <Animated.Text
                style={[styles.sliderText, { transform: [{ scale }] }]}>
                Active
              </Animated.Text>
            </Pressable>
            <Pressable
              style={styles.clickableArea}
              onPress={startAnimation.bind(null, 1)}>
              <Animated.Text
                style={[styles.sliderText, { transform: [{ scale }] }]}>
                History
              </Animated.Text>
            </Pressable>
          </View>
        </View>
      );      
    };

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      sliderContainer: {
        width: '90%',
        height: 50,
        borderRadius: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#e0e0e0',
      },
      clickableArea: {
        width: '50%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
      },
      sliderText: {
        fontSize: 17,
        fontWeight: '500',
      },
      slider: {
        position: 'absolute',
        width: '48%',
        height: '90%',
        borderRadius: 10,
        backgroundColor: '#f4f4f4',
      },
    });

    export default App;

Here 你可以查看它是如何工作的演示。

Answer 3

想法是让背景可以动起来。

See the sample i've created.

编码愉快！

React Native 中的滑块切换按钮？

Slider toggle button in react native?

javascript

reactjs

react-native

react-native-paper