react native ts写法 顶部tab滑动

React Native中使用TypeScript编写顶部Tab滑动组件可以使用React Navigation库中提供的TabNavigator组件来实现。以下是一个简单的示例代码：

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

type Props = {};

const Tab = createMaterialTopTabNavigator();

const FirstTabScreen = () => {
  return (
    <View style={styles.container}>
      <Text>First Tab</Text>
    </View>
  );
};

const SecondTabScreen = () => {
  return (
    <View style={styles.container}>
      <Text>Second Tab</Text>
    </View>
  );
};

const TopTabNavigator = (props: Props) => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="First" component={FirstTabScreen} />
      <Tab.Screen name="Second" component={SecondTabScreen} />
    </Tab.Navigator>
  );
};

export default TopTabNavigator;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

在这个示例中，我们使用了React Navigation库提供的`createMaterialTopTabNavigator`函数来创建一个顶部Tab滑动组件，并通过`Tab.Screen`组件来添加Tab项。每个Tab项都需要指定一个`name`属性和相应的组件`component`。在`FirstTabScreen`和`SecondTabScreen`组件中，我们可以自定义Tab项的内容。最后，我们将`TopTabNavigator`作为一个组件导出。