时间戳

首页 > 解决方案 > createMaterialBottomTabNavigator 在 ios 中不起作用

react-native - createMaterialBottomTabNavigator 在 ios 中不起作用

问题描述

我已将“react-navigation-material-bottom-tabs”用于底部标签导航，它在 android 中工作得非常好，标签点击时会产生涟漪效应，但在 ios 中涟漪效应不起作用，

import * as React from 'react';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'; // <- notice where we import createMaterialBottomTabNavigator from
import { MaterialIcons } from '@expo/vector-icons';

const tabBarIcon = name => ({ tintColor }) => (
  <MaterialIcons
    style={{ backgroundColor: 'transparent' }}
    name={name}
    color={tintColor}
    size={24}
  />
);

const screens = {
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      tabBarIcon: tabBarIcon('photo-album'),
      tabBarColor: 'blue' // <- set this to the color you want
    }
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: {
      tabBarIcon: tabBarIcon('favorite'),
      tabBarColor: 'green' // <- set this to the color you want
    }
  }
};

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1',
  shifting: true,  // <- notice this has been set to true
  activeColor: 'white',
  inactiveColor: 'black'
};

const MainNavigator = createMaterialBottomTabNavigator(screens, config);
export default createAppContainer(MainNavigator);

来自 package.json 的依赖项：

"dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-paper": "^2.16.0",
    "react-native-svg": "^9.6.2",
    "react-native-svg-icon": "^0.8.1",
    "react-native-svg-uri": "^1.2.3",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.1",
    "react-navigation-material-bottom-tabs": "^1.0.0"
}

标签： react-native

解决方案

查看您的依赖项，您似乎没有react-navigation完全按照说明进行安装。

看起来你还没有安装react-native-reanimated它是有意义的，因为它是react-navigation.

您可以按如下方式安装它：

yarn add react-native-reanimated

或使用 npm

npm install react-native-reanimated

由于您使用的 react-native 版本大于0.60.0您应该能够依赖自动链接的版本。但是，您可能需要重新安装 pod。您可以通过在项目的根目录打开终端并运行以下命令来执行此操作。

$ cd ios
$ pod install
$ cd ..

推荐阅读