89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
import {
|
|
View,
|
|
Keyboard,
|
|
TouchableWithoutFeedback,
|
|
Dimensions,
|
|
} from "react-native";
|
|
import React, { useState } 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>
|
|
);
|
|
}
|