React Native Navigation Animation 教程

React Native Navigation Animation 教程

react-native-navigation-animationTransition navigation component for React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-navigation-animation

1. 项目的目录结构及介绍

react-native-navigation-animation/
├── android/
├── ios/
├── src/
│   ├── assets/
│   ├── components/
│   ├── navigation/
│   ├── screens/
│   ├── styles/
│   └── App.js
├── index.js
├── app.json
├── package.json
└── README.md

• android/: 包含Android项目的相关文件。
• ios/: 包含iOS项目的相关文件。
• src/: 源代码目录。
  • assets/: 存放静态资源，如图片、字体等。
  • components/: 存放可复用的React组件。
  • navigation/: 存放导航相关的配置和组件。
  • screens/: 存放应用的各个屏幕组件。
  • styles/: 存放全局样式文件。
  • App.js: 应用的入口文件。
• index.js: 项目的入口文件。
• app.json: 应用的配置文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

index.js

import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

• AppRegistry.registerComponent: 注册应用的根组件，appName 是从 app.json 中读取的应用名称。

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

export default App;

• NavigationContainer: 导航的容器组件。
• createStackNavigator: 创建堆栈导航器。
• Stack.Navigator: 定义导航器，包含初始路由和各个屏幕组件。

3. 项目的配置文件介绍

app.json

{
  "name": "react_native_navigation_animation",
  "displayName": "React Native Navigation Animation"
}

• name: 应用的内部名称。
• displayName: 应用的显示名称。

package.json

{
  "name": "react-native-navigation-animation",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.66.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

• scripts: 定义了运行、测试和lint等脚

react-native-navigation-animationTransition navigation component for React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-navigation-animation