97 lines
2.9 KiB
React
97 lines
2.9 KiB
React
|
import {
|
||
|
|
View,
|
||
|
|
TouchableOpacity,
|
||
|
|
Image as NativeImage,
|
||
|
|
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 FeedStream from "./FeedStream";
|
||
|
|
import FollowStream from "./FollowStream";
|
||
|
|
|
||
|
|
export default function Stream({ navigation }) {
|
||
|
|
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 / 5;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
paddingTop: insets.top,
|
||
|
|
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-2/5")}>
|
||
|
|
<Tab
|
||
|
|
value={index}
|
||
|
|
onChange={(e) => {
|
||
|
|
setIndex(e);
|
||
|
|
setIndicatorX(e * tabWidth);
|
||
|
|
}}
|
||
|
|
dense
|
||
|
|
indicatorStyle={{
|
||
|
|
...tailwind("h-1 w-10 ml-4 rounded-full"),
|
||
|
|
backgroundColor: "#FF7DCB",
|
||
|
|
transform: [{ translateX: indicatorX }],
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Tab.Item
|
||
|
|
titleStyle={
|
||
|
|
index === 0
|
||
|
|
? tailwind("text-white text-2xl font-medium")
|
||
|
|
: { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
|
||
|
|
}
|
||
|
|
>
|
||
|
|
推荐
|
||
|
|
</Tab.Item>
|
||
|
|
<Tab.Item
|
||
|
|
titleStyle={
|
||
|
|
index === 1
|
||
|
|
? tailwind("text-white text-2xl font-medium")
|
||
|
|
: { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
|
||
|
|
}
|
||
|
|
>
|
||
|
|
关注
|
||
|
|
</Tab.Item>
|
||
|
|
</Tab>
|
||
|
|
</View>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={tailwind(
|
||
|
|
"flex items-center justify-center w-9 h-9 mr-4 bg-[#FFFFFF1A] rounded-full"
|
||
|
|
)}
|
||
|
|
onPress={() => navigation.navigate("Search")}
|
||
|
|
>
|
||
|
|
<NativeImage source={require("../../assets/icon/32DP/search.png")} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
</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")}>
|
||
|
|
<FeedStream />
|
||
|
|
</TabView.Item>
|
||
|
|
<TabView.Item style={tailwind("w-full flex-1")}>
|
||
|
|
<FollowStream />
|
||
|
|
</TabView.Item>
|
||
|
|
</TabView>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|