react-native - 在 React Native 中使用登录/注册选项卡创建卡片

Question

嗨我想创建一个带有登录和注册选项卡的卡片，我正在使用反应原生元素，但不知道如何在卡片中添加选项卡，这是我想要的图像

Answer 1

也许这样的事情会起作用

const AuthentificationCard = () => {
  // 0 = login || 1 = signIn
  const [cardstate, setcardState] = useState(0);

  return (
    <Card>
      <TouchableTab onPress={() => setcardState(0)}> login </TouchableTab>
      <TouchableTab onPress={() => setcardState(1)}> Signin </TouchableTab>

      {cardstate == 0 ? ( <LoginComponent/> ) : ( <SignInComponent/> )}
    </Card>
  );
}

或基于类的组件

class AuthentificationCard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cardstate: 0,
    };
  }

  render() {
    return (
     <Card>
           <TouchableOpacity onPress={() => this.setState({ cardstate: 0})}> <Text>login</Text> </TouchableOpacity> 
           <TouchableOpacity onPress={() => this.setState({ cardstate: 1})}> <Text>SignIn</Text> </TouchableOpacity> 
           {this.state.cardstate == 0 ? ( <LoginComponent/> ) : ( <SignInComponent/> )}
    </Card>
    );
  }
}