React-Native踩坑之旅

React-Native踩坑之旅

1、 启动项目报错 RNCSafeAreaProvider was not found in the UIManager

安装react-native-safe-area-context

2、react-native-vector-icons无法识别

https://blog.csdn.net/qq_37800886/article/details/99623319

3、 this.props.navigation不能跳转

his.props.navigation并不是在所有页面（组件）中都可以使用，而是必须在StackNavigator、DrawerNavigator中声明的screen组件，才可以使用this.props.navigation
而且只有createStackNavigator声明的页面才有完整的push，popToTop等方法

4、设置顶部导航

引入createMaterialTopTabNavigator,MaterialTopTabBar,具体配置见官网

5、引入AsyncStorage报错setItem is not defined

react-native link @react-native-community/async-storage

6、打印AsyncStorage.gettItem获取的值显示_U,_V, _W,_X

需要使用async，await获取值

7、设置路由options的headerLeft，headerRight无效

headerLeft函数需要返回return返回一个react element

headerLeft: () => {
    return <Button title="扫一扫" onPress={() => {}} />;
},
headerLeft: () => <Button title="扫一扫" onPress={() => {}} />,

这样写不能显示

headerLeft: () => {
    <Button title="扫一扫" onPress={() => {}} />;
},

8、[BABEL] …/index.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options

babel.config.js配置

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
        blacklist: null,
        whitelist: null,
        safe: false,
        allowUndefined: true,
      },
    ],
  ],
};

引入.env中变量

import {SERVER_PREFIX, SERVER_PORT, SERVER_HOST, SERVER_PROTOCOL} from '@env';