80 lines
2.4 KiB
React
80 lines
2.4 KiB
React
|
import { View, Dimensions } from "react-native";
|
||
|
|
import React, { useState } from "react";
|
||
|
|
import { useTailwind } from "tailwind-rn";
|
||
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||
|
|
import { Tab, TabView } from "@rneui/themed";
|
||
|
|
import Follows from "./Follows";
|
||
|
|
import Fans from "./Fans";
|
||
|
|
|
||
|
|
export default function Relationship({ navigation, route }) {
|
||
|
|
const tailwind = useTailwind();
|
||
|
|
const insets = useSafeAreaInsets();
|
||
|
|
const [index, setIndex] = useState(route.params.tab);
|
||
|
|
//修复ios使用了tab组件闪退问题
|
||
|
|
const windowWidth = Dimensions.get("window").width;
|
||
|
|
const tabWidth = windowWidth / 2;
|
||
|
|
const [indicatorX, setIndicatorX] = useState(route.params.tab * tabWidth);
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
paddingLeft: insets.left,
|
||
|
|
paddingRight: insets.right,
|
||
|
|
...tailwind("flex flex-1"),
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<View style={tailwind("flex pb-1 flex-row justify-between items-center")}>
|
||
|
|
<View style={tailwind("flex w-full")}>
|
||
|
|
<Tab
|
||
|
|
value={index}
|
||
|
|
onChange={(e) => {
|
||
|
|
setIndex(e);
|
||
|
|
setIndicatorX(e * tabWidth);
|
||
|
|
}}
|
||
|
|
dense
|
||
|
|
indicatorStyle={{
|
||
|
|
...tailwind("bg-[#FF7DCB] rounded-full"),
|
||
|
|
transform: [{ translateX: indicatorX }],
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Tab.Item
|
||
|
|
titleStyle={
|
||
|
|
index === 0
|
||
|
|
? tailwind("text-white font-medium text-base")
|
||
|
|
: tailwind("text-[#FFFFFF80] text-base font-medium")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
关注
|
||
|
|
</Tab.Item>
|
||
|
|
<Tab.Item
|
||
|
|
titleStyle={
|
||
|
|
index === 1
|
||
|
|
? tailwind("text-white font-medium text-base")
|
||
|
|
: tailwind("text-[#FFFFFF80] text-base font-medium")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
粉丝
|
||
|
|
</Tab.Item>
|
||
|
|
</Tab>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={tailwind("flex flex-1 w-full")}>
|
||
|
|
<TabView
|
||
|
|
value={index}
|
||
|
|
onChange={(e) => {
|
||
|
|
setIndex(e);
|
||
|
|
setIndicatorX(e * tabWidth);
|
||
|
|
}}
|
||
|
|
animationType="spring"
|
||
|
|
>
|
||
|
|
<TabView.Item style={tailwind("w-full flex-1")}>
|
||
|
|
<Follows />
|
||
|
|
</TabView.Item>
|
||
|
|
<TabView.Item style={tailwind("w-full flex-1")}>
|
||
|
|
<Fans />
|
||
|
|
</TabView.Item>
|
||
|
|
</TabView>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|