React Navigation中使用typescript简洁演示代码

最近在尝试转到typescript，之前代码中含有的大量{navigaiton}:any近期打算把这样的代码优化一下。

参考以下文档：
https://reactnavigation.org/docs/typescript

尽量让代码精简，形成了以下代码。希望对大家有用。

依赖

yarn add @react-navigation/native

yarn add react-native-screens react-native-safe-area-context

yarn add @react-navigation/native-stack

yarn add @react-navigation/bottom-tabs

演示代码

把以下代码保存成App.tsx就可以看到效果了。

import * as React from 'react';
import {Button, View, Text, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NativeStackScreenProps} from '@react-navigation/native-stack';
import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
import {CompositeScreenProps} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
//------------types----------------start
//Stack 所有的Screen名称
export type RootStackParamList = {
  TabNav: undefined;
  Details: undefined;
};

//我的理解就是上面的RootStackParamList的一个Copy
export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

//Tab中所有的Screen 的名称
export type RootTabParamList = {
  Home: undefined;
  Settings: undefined;
};

//合并Stack 和 Tab中的所有Screen
export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<RootTabParamList, Screen>,
    NativeStackScreenProps<RootStackParamList>
  >;
//------------types----------------end
//------------screens--------------start
function HomeScreen({navigation}: RootTabScreenProps<'Home'>) {
  return (
    <View style={styles.container}>
      <Text>我是首页20211123!</Text>
      <Button
        title="占我去设置"
        onPress={() => navigation.navigate('Settings')}
      />
      <Button
        title="点我去详情"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({navigation}: RootStackScreenProps<'Details'>) {
  return (
    <View style={styles.container}>
      <Text>详情页面</Text>
      <Button title="详情页面套娃" onPress={() => navigation.push('Details')} />
    </View>
  );
}

function SettingsScreen({navigation}: RootTabScreenProps<'Settings'>) {
  return (
    <View style={styles.container}>
      <Text>设置页面</Text>
      <Button title="点我去首页" onPress={() => navigation.navigate('Home')} />
      <Button
        title="点我去详情"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

//tabs
const Tab = createBottomTabNavigator<RootTabParamList>();
function TabNav() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{title: '首页'}}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{title: '设置'}}
      />
    </Tab.Navigator>
  );
}
//------------screens--------------end
const Stack = createNativeStackNavigator<RootStackParamList>();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="TabNav">
        <Stack.Screen
          name="TabNav"
          component={TabNav}
          options={{title: '首页', headerShown: false}}
        />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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