Question

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

Answer 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;

反应本机切换器

1 个答案: