React Native 切换器答案

【问题标题】：React Native SwitcherReact Native 切换器
【发布时间】：2021-10-06 22:42:03
【问题描述】：

在 react-native 中是否有一些方法可以创建具有这种精确设计的切换器？谢谢！

【问题讨论】：

【解决方案1】：

这很容易。首先，如果使用钩子，在组件中使用 useState 跟踪哪个状态处于活动状态。布尔值在这方面效果很好，因为只有两种状态。然后你可以在 JSX 中使用条件渲染来切换按钮 / touchableOpacity 的样式，让它们看起来不一样。然后，按下时您只需更新状态。稍后您也可以使用它来更改其下方的表单，或者如果您正在使用它，则可以在 redux 中发送到不同的操作。

请注意，下面的代码是一个示例。它没有经过测试，有点冗长。（请参阅Correct way to handle conditional styling in React 了解缩短它的一种方法。）我总是将我的大部分样式表分开保存，以便在我的应用程序中更改主题。（我的意思是确实是一个具有特定样式的按钮。）

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import { Theme } from "../../Theme";

const SignUpSelection = (props: any) => {
  const [isSignInActive, setIsSignInActive] = useState<boolean>(false);

  const onSignInPressed = () => {
    setIsSignInActive(true);
  };

  const onSignUpPressed = () => {
    setIsSignInActive(false);
  };

  const styles = StyleSheet.create({
    signInSelectionContainer: {

    }, 
    buttonContainer: {

    }
  })
  return (
    <View style={styles.signInSelectionContainer}>
      <View style={styles.buttonContainer}>
        {isSignInActive ? (
          <Theme.activeSignIn
            title="Sign In"
            onPress={onSignInPressed}
          />
        ) : (
          <Theme.inactiveSignIn
            onPress={onSignInPressed}
            title="Sign in"
          ></Theme.inactiveSignIn>
        )}
      </View>
      <View style={styles.buttonContainer}>
        {isSignInActive ? (
          <Theme.inactiveSignUp
            title="Sign up"
            onPress={onSignUpPressed}
          />
        ) : (
          <Theme.activeSignUp
            title="Sign up"
            onPress={onSignUpPressed}
          />
        )}
      </View>
    </View>
  );
};

export default SignUpSelection;

【讨论】：