106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import {
|
|
View,
|
|
Keyboard,
|
|
TouchableWithoutFeedback,
|
|
Dimensions,
|
|
Animated,
|
|
useWindowDimensions,
|
|
Image as NativeImage,
|
|
} from "react-native";
|
|
import React, { useState, useCallback } from "react";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import PasswordLogin from "./PasswordLogin";
|
|
import PhoneNumLogin from "./PhoneNumLogin";
|
|
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
|
|
|
|
export default function Login() {
|
|
const tailwind = useTailwind();
|
|
const insets = useSafeAreaInsets();
|
|
|
|
//tab组件相关
|
|
const layout = useWindowDimensions();
|
|
const [index, setIndex] = useState(0);
|
|
const [routes] = useState([
|
|
{ key: "phoneNumLogin", title: "验证码登录" },
|
|
{ key: "passwordLogin", title: "账号密码登录" },
|
|
]);
|
|
|
|
const renderScene = useCallback(
|
|
SceneMap({
|
|
phoneNumLogin: () => <PhoneNumLogin />,
|
|
passwordLogin: () => <PasswordLogin />,
|
|
}),
|
|
[]
|
|
);
|
|
|
|
const renderIndicator = useCallback((props) => {
|
|
const { position, navigationState, getTabWidth } = props;
|
|
const inputRange = [0, 1];
|
|
const translateX = position.interpolate({
|
|
inputRange: inputRange,
|
|
outputRange: inputRange.map((x) => {
|
|
return x * getTabWidth(navigationState.index);
|
|
}),
|
|
});
|
|
return (
|
|
<Animated.View
|
|
style={{
|
|
width: `${100 / navigationState.routes.length}%`,
|
|
transform: [
|
|
{
|
|
translateX,
|
|
},
|
|
],
|
|
paddingBottom: 5,
|
|
...tailwind("flex flex-1 items-center justify-end"),
|
|
}}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/tabindicator.png")}
|
|
/>
|
|
</Animated.View>
|
|
);
|
|
}, []);
|
|
|
|
const renderTabBar = useCallback(
|
|
(props) => (
|
|
<View style={tailwind("flex flex-row items-center")}>
|
|
<TabBar
|
|
{...props}
|
|
activeColor="#FFFFFF"
|
|
inactiveColor="#FFFFFF80"
|
|
style={tailwind("bg-transparent flex-1")}
|
|
labelStyle={tailwind("text-xl font-medium")}
|
|
renderIndicator={renderIndicator}
|
|
/>
|
|
</View>
|
|
),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
|
<View
|
|
style={{
|
|
paddingTop: insets.top,
|
|
paddingBottom: insets.bottom,
|
|
paddingLeft: insets.left,
|
|
paddingRight: insets.right,
|
|
...tailwind("flex flex-1"),
|
|
}}
|
|
>
|
|
<TabView
|
|
navigationState={{ index, routes }}
|
|
swipeEnabled={true}
|
|
renderScene={renderScene}
|
|
renderTabBar={renderTabBar}
|
|
onIndexChange={setIndex}
|
|
initialLayout={{ width: layout.width }}
|
|
style={tailwind("mt-32")}
|
|
/>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
}
|