react native实现界面转换

使用 React Navigation 实现界面转换

React Navigation 是 React Native 中最流行的导航库，支持堆栈导航、底部标签导航等多种方式。

安装 React Navigation 及相关依赖：

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

创建堆栈导航器并定义屏幕：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在屏幕组件中进行导航跳转：

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  );
}

使用动画效果增强界面转换

React Navigation 默认提供多种过渡动画，也可以通过自定义过渡效果提升用户体验。

配置屏幕过渡动画：

<Stack.Navigator
  screenOptions={{
    animation: 'slide_from_right', // 可选：slide_from_bottom, fade_from_bottom等
  }}
>

自定义过渡动画需使用 CardStyleInterpolators：

import { CardStyleInterpolators } from '@react-navigation/stack';

<Stack.Navigator
  screenOptions={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  }}
>

处理导航参数传递

在界面间传递数据是常见需求，可通过路由参数实现。

发送参数到目标屏幕：

navigation.navigate('Details', {
  itemId: 86,
  otherParam: 'anything',
});

在目标屏幕接收参数：

function DetailsScreen({ route }) {
  const { itemId, otherParam } = route.params;
  return <Text>Item ID: {itemId}</Text>;
}

实现底部标签导航

对于需要多个主要功能入口的应用，底部标签导航是理想选择。

安装必要依赖：

npm install @react-navigation/bottom-tabs

配置底部导航器：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

自定义标签栏外观：

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;
      if (route.name === 'Home') {
        iconName = focused ? 'home' : 'home-outline';
      }
      return <Ionicons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: 'tomato',
    tabBarInactiveTintColor: 'gray',
  })}
>

处理深层链接和动态路由

对于需要从外部链接或通知跳转特定界面的场景，需配置深层链接。

定义链接配置：

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Details: 'details/:id',
    },
  },
};

function App() {
  return (
    <NavigationContainer linking={linking}>
      {/* 导航器配置 */}
    </NavigationContainer>
  );
}

处理动态路由参数：

function DetailsScreen({ route }) {
  const { id } = route.params;
  // 根据id获取数据
}