目前使用的项目node版本v14.17.5, npm版本6.14.14, reactNative项目使用的模板结合typescript语法的项目模板架构，安装的方式如下:
npx react-native init xxx(项目名) --template react-native-template-typescript
完成之后可直接运行yarn android 或 npm run android 将项目启动。
查看reactNative插件的网址js.coach。
目前配置reactNative多环境变量的方式最好用的莫过于react-native-config这个插件，可以在根目录中创建一个.env文件，内容可以测试下，配置成这样：
API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh
在App.tsx文件中加入：
import Config from 'react-native-config';
<Text>{Config.API_URL}</Text>
<Text>{Config.GOOGLE_MAPS_API_KEY}</Text>
之后按照jscoach的步骤:
一 yarn add react-native-config
二 ReactNative 0.60版本以后可以自动引入无需连接 react-native link react-native-config
三 iOS方面需要先进入项目，之后（cd ios; pod install）
四 Android方面需手工引入
android/settings.gradle
include ‘:react-native-config’
project(’:react-native-config’).projectDir = new File(rootProject.projectDir, ‘…/node_modules/react-native-config/android’)
android/app/build.gradle
dependencies {
implementation “com.facebook.react:react-native:+” // From node_modules
implementation project(’:react-native-config’)
}
最后一行加上 apply from: project(’:react-native-config’).projectDir.getPath() + “/dotenv.gradle”
完成之后可直接运行yarn android 或 npm run android 将项目启动。查看是否有了输出内容。
项目目录繁杂，需要配置可配置化的路径进行统一方式引用，此时需要安装下载插件babel-plugin-module-resolver
yarn add -D babel-plugin-module-resolver
在项目根目录下的babel.config.js中配置plugins
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'@': './src',
'@/utils': './src/utils',
'@/assets': './src/assets',
'@/components': './src/components',
'@/models': './src/models',
'@/navigator': './src/navigator',
'@/config': './src/config',
'@/pages': './src/pages',
},
},
],
],
如下图这样的引用便不会报错，另外还需配置tsconfig.json中baseUrl和path属性
import {test} from '@/utils';
"baseUrl": "./src", /* Base directory to resolve non-absolute module names. */
"paths": {
"@/assets/*": ["assets/*"],
"@/components/*": ["components/*"],
"@/config/*": ["config/*"],
"@/models/*": ["models/*"],
"@/navigator/*": ["navigator/*"],
"@/pages/*": ["pages/*"],
"@/utils/*": ["utils/*"]
},
React Navigation 官网可以查看React Native常用的基本堆栈式导航器进行类似前端Vue, React方法各自的路由方式导航模式。安装模式的参考网站
1.使用yarn命令行安装(此处参考我本人这里，官网这块有点问题)
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
2.MacOs用户对应的IOS的项目需要进行pod下载
cd ios; pod install
3.在android项目中使用react-native-screens该插件需要在部分文件需要配置：
1）在android/app/src/main/java/文件项目名/MainActivity.java中加入代码:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
2）同时在MainActivity.java最上面引入这段代码
import android.os.Bundle;
3）项目最底层的index.js文件中需要引入：
import 'react-native-gesture-handler';
4）项目中下载堆栈式导航插件Stack Navigator
yarn add @react-navigation/stack
在安装好后可以yarn android 或者 yarn ios 跑一下对应的原生环境尝试是否有报错情况，有的话自行调优或者参考我这里的解决方案总集
这里编写一下主要的关于路由的代码逻辑：
// navigation/index.tsx
import React from 'react';
import {Platform, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
CardStyleInterpolators,
createStackNavigator,
HeaderStyleInterpolators,
StackNavigationProp,
} from '@react-navigation/stack';
import Home from '@/pages/Home';
import Detail from '@/pages/Detail';
export type RootStackParamList = {
Home: undefined;
Detail: {
id: number;
};
};
export type RootStackNavigation = StackNavigationProp<RootStackParamList>;
let Stack = createStackNavigator<RootStackParamList>();
const MyStackNavigation = () => {
return (
// <Text>11</Text>
<NavigationContainer>
<Stack.Navigator
// 所有堆栈导航的配置
screenOptions={{
// 头部导航居中
headerTitleAlign: 'center',
// 标题栏模式， ios(float): 公用一个标题栏 android(screen): 每个页面一个标题栏 none 整个标题栏消失
headerMode: 'float',
// 设置头部的动画效果
headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
// 设置底部页面的动画效果
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
// android 默认关闭，所以设置默认开启
gestureEnabled: true,
// android 默认手势方向垂直，所以设置默认水平
gestureDirection: 'horizontal',
// android头部与页面之间有投影效果(由于android没有阴影效果)，所以统一设置
headerStyle: {
...Platform.select({
android: {
elevation: 0,
borderBottomWidth: StyleSheet.hairlineWidth,
},
// ios: {
// }
}),
},
}}>
<Stack.Screen
options={{headerTitleAlign: 'center', headerTitle: '首页'}}
name="Home"
component={Home}
/>
<Stack.Screen
options={{headerTitleAlign: 'center', headerTitle: '详情页'}}
name="Detail"
component={Detail}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default MyStackNavigation;
当中的注释会对路由的部分参数和注意事项做说明,特别是screenOptions这一块内容
主要使用的是@react-navigation/stack中StackNavigationProp模块以及@react-navigation/native中RouteProp配合使用;
我们假设Home页面传值100到Detail页面，以下是Home页面代码
import React, {FC} from 'react';
import {View, Text, Button} from 'react-native';
import {RootStackNavigation} from '@/navigator/index';
interface IProps {
navigation: RootStackNavigation;
}
const Home: FC<IProps> = props => {
const onPress = () => {
const {navigation} = props;
navigation.navigate('Detail', {
id: 100,
});
};
return (
<View>
<Text>Home</Text>
<Button title="跳转到详情页" onPress={onPress} />
</View>
);
};
export default Home;
还是Detail页面代码:
import React, {FC} from 'react';
import {View, Text} from 'react-native';
import {RouteProp} from '@react-navigation/native';
import {RootStackParamList} from '@/navigator/index';
interface IProps {
route: RouteProp<RootStackParamList, 'Detail'>;
}
const Detail: FC<IProps> = props => {
const {route} = props;
return (
<View>
<Text>Detail</Text>
<Text>{route.params.id}</Text>
</View>
);
};
export default Detail;
未完待续！