tiefen_space_app/screeens/Stream/index.jsx

109 lines
2.9 KiB
JavaScript

import {
View,
TouchableOpacity,
Image as NativeImage,
Animated,
useWindowDimensions,
} from "react-native";
import React, { useState, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import FeedStream from "./FeedStream";
import FollowStream from "./FollowStream";
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
export default function Stream({ navigation }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
//tab组件相关
const layout = useWindowDimensions();
const [index, setIndex] = useState(0);
const [routes] = useState([
{ key: "feed", title: "推荐" },
{ key: "follow", title: "关注" },
]);
const renderScene = useCallback(
SceneMap({
feed: () => <FeedStream />,
follow: () => <FollowStream />,
}),
[]
);
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-2xl font-medium")}
tabStyle={{ width: "auto" }}
renderIndicator={renderIndicator}
/>
<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>
),
[]
);
return (
<View
style={{
paddingTop: insets.top,
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 }}
/>
</View>
);
}