Commit

src/stacks/common/TimelinesCombined.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import { Animated, Dimensions, Text, View } from 'react-native'
+import { Dimensions, FlatList, View } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { Feather } from '@expo/vector-icons'
@@ -8,20 +8,32 @@ import { Feather } from '@expo/vector-icons'
 import Timeline from './Timeline'
 import Account from 'src/stacks/Shared/Account'
 import Hashtag from 'src/stacks/Shared/Hashtag'
+import Toot from 'src/stacks/Shared/Toot'
 import Webview from 'src/stacks/Shared/Webview'
 
 const Stack = createNativeStackNavigator()
 
+function Page ({ item: { page } }) {
+  return (
+    <View style={{ width: Dimensions.get('window').width }}>
+      <Timeline page={page} />
+    </View>
+  )
+}
+
 export default function TimelinesCombined ({ name, content }) {
   const [segment, setSegment] = useState(0)
   const [renderHeader, setRenderHeader] = useState(false)
+  const [segmentManuallyTriggered, setSegmentManuallyTriggered] = useState(
+    false
+  )
 
   useEffect(() => {
     const nbr = setTimeout(() => setRenderHeader(true), 50)
     return
   }, [])
 
-  const moveAnimation = useRef(new Animated.Value(0)).current
+  const horizontalPaging = useRef()
 
   return (
     <Stack.Navigator>
@@ -38,37 +50,47 @@ export default function TimelinesCombined ({ name, content }) {
               <SegmentedControl
                 values={[content[0].title, content[1].title]}
                 selectedIndex={segment}
-                onChange={e => {
-                  setSegment(e.nativeEvent.selectedSegmentIndex)
-                  Animated.timing(moveAnimation, {
-                    toValue:
-                      -e.nativeEvent.selectedSegmentIndex *
-                      Dimensions.get('window').width,
-                    duration: 250,
-                    useNativeDriver: false
-                  }).start()
+                onChange={({ nativeEvent }) => {
+                  setSegmentManuallyTriggered(true)
+                  setSegment(nativeEvent.selectedSegmentIndex)
+                  horizontalPaging.current.scrollToIndex({
+                    index: nativeEvent.selectedSegmentIndex
+                  })
                 }}
                 style={{ width: 150, height: 30 }}
               />
             ) : null
         }}
       >
-        {props => (
-          <Animated.View
-            style={{
-              flexDirection: 'row',
-              width: Dimensions.get('window').width * 2,
-              left: moveAnimation
+        {() => (
+          <FlatList
+            style={{ width: Dimensions.get('window').width, height: '100%' }}
+            data={content}
+            keyExtractor={({ page }) => page}
+            renderItem={({ item, index }) => {
+              return <Page key={index} item={item} />
             }}
-            {...props}
-          >
-            <View style={{ width: Dimensions.get('window').width }}>
-              <Timeline page={content[0].page} />
-            </View>
-            <View style={{ width: Dimensions.get('window').width }}>
-              <Timeline page={content[1].page} />
-            </View>
-          </Animated.View>
+            ref={horizontalPaging}
+            bounces={false}
+            getItemLayout={(data, index) => ({
+              length: Dimensions.get('window').width,
+              offset: Dimensions.get('window').width * index,
+              index
+            })}
+            horizontal
+            onMomentumScrollEnd={() => setSegmentManuallyTriggered(false)}
+            onScroll={({ nativeEvent }) =>
+              !segmentManuallyTriggered &&
+              setSegment(
+                nativeEvent.contentOffset.x <=
+                  Dimensions.get('window').width / 2
+                  ? 0
+                  : 1
+              )
+            }
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+          />
         )}
       </Stack.Screen>
       <Stack.Screen
@@ -87,12 +109,19 @@ export default function TimelinesCombined ({ name, content }) {
           title: `#${decodeURIComponent(route.params.hashtag)}`
         })}
       />
+      <Stack.Screen
+        name='Toot'
+        component={Toot}
+        options={() => ({
+          title: '对话'
+        })}
+      />
       <Stack.Screen
         name='Webview'
         component={Webview}
-        options={({ route }) => ({
-          title: `${route.params.domain}`
-        })}
+        // options={({ route }) => ({
+        //   title: `${route.params.domain}`
+        // })}
       />
     </Stack.Navigator>
   )