React Native 登录动画示例项目教程
react-native-login-animation-example A React-Native login animation example 项目地址:https://gitcode.com/gh_mirrors/re/react-native-login-animation-example
1. 项目的目录结构及介绍
react-native-login-animation-example/
├── __tests__/
├── android/
├── ios/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── Button.js
│ │ ├── InputField.js
│ │ ├── Logo.js
│ │ ├── PasswordField.js
│ │ └── TouchableText.js
│ ├── screens/
│ │ ├── LoginScreen.js
│ │ └── WelcomeScreen.js
│ ├── App.js
│ └── index.js
├── .gitignore
├── .prettierrc
├── App.js
├── babel.config.js
├── index.js
├── package.json
└── README.md
目录结构介绍
__tests__/
: 存放项目的测试文件。android/
和 ios/
: 分别包含 Android 和 iOS 的原生代码。src/
: 项目的源代码目录。
assets/
: 存放静态资源文件,如图片、字体等。components/
: 存放可复用的组件,如按钮、输入框等。screens/
: 存放应用的不同屏幕组件,如登录页和欢迎页。App.js
: 应用的根组件。index.js
: 应用的入口文件。 .gitignore
: 指定 Git 版本控制系统忽略的文件和目录。.prettierrc
: 配置代码格式化工具 Prettier。babel.config.js
: Babel 配置文件,用于转换 JavaScript 代码。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
方法将 App
组件注册为应用的根组件,并指定应用的名称。
App.js
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import LoginScreen from './screens/LoginScreen';
import WelcomeScreen from './screens/WelcomeScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Welcome" component={WelcomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
App.js
是应用的根组件,负责设置导航容器和导航栈。使用 @react-navigation/native
和 @react-navigation/stack
库来管理应用的导航。 定义了两个屏幕组件:LoginScreen
和 WelcomeScreen
,并设置初始路由为 Login
。
3. 项目的配置文件介绍
package.json
{
"name": "react-native-login-animation-example",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-gesture-handler": "^1.7.0",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.1.4",
"react-native
react-native-login-animation-example A React-Native login animation example 项目地址:https://gitcode.com/gh_mirrors/re/react-native-login-animation-example