tiefen_space_app/screeens/Login/index.jsx

89 lines
2.5 KiB
JavaScript

import {
View,
Keyboard,
TouchableWithoutFeedback,
Dimensions,
} from "react-native";
import React, { useState, useEffect } from "react";
import { Tab, TabView } from "@rneui/themed";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTailwind } from "tailwind-rn";
import PasswordLogin from "./PasswordLogin";
import PhoneNumLogin from "./PhoneNumLogin";
export default function Login() {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
const [index, setIndex] = useState(0);
//修复ios使用了tab组件闪退问题
const [indicatorX, setIndicatorX] = useState(0);
const windowWidth = Dimensions.get("window").width;
const tabWidth = windowWidth / 2;
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View
style={{
paddingTop: insets.top,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
...tailwind("flex flex-1"),
}}
>
{/* tab栏 */}
<Tab
value={index}
onChange={(e) => {
Keyboard.dismiss();
setIndex(e);
setIndicatorX(e * tabWidth);
}}
dense
indicatorStyle={{
...tailwind("bg-[#FF7DCB] h-1 w-20 ml-[3.2rem] rounded-full"),
transform: [{ translateX: indicatorX }],
}}
style={tailwind("mt-32")}
>
<Tab.Item
titleStyle={
index === 0
? tailwind("text-white font-medium text-xl")
: tailwind("text-[#FFFFFF80] text-xl font-medium")
}
>
验证码登陆
</Tab.Item>
<Tab.Item
titleStyle={
index === 1
? tailwind("text-white font-medium text-xl")
: tailwind("text-[#FFFFFF80] text-xl font-medium")
}
>
账号密码登陆
</Tab.Item>
</Tab>
<TabView
value={index}
onChange={(e) => {
setIndex(e);
setIndicatorX(e * tabWidth);
}}
animationType="spring"
disableSwipe
>
<TabView.Item style={tailwind("w-full flex-1")}>
<PhoneNumLogin />
</TabView.Item>
<TabView.Item style={tailwind("w-full flex-1")}>
<PasswordLogin />
</TabView.Item>
</TabView>
</View>
</TouchableWithoutFeedback>
);
}