javascript - 无法从 React Native Paper 添加底部导航

Question

我最近开始使用 react-native 和 react-native-paper，我按照文档设置了所有内容，但是当我尝试添加底部导航时，出现以下错误：TypeError: undefined is not an object (evaluating 'route.map')。你能帮我解决这个问题吗？

这是我的代码：

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;


export default function App() {
  const [navigationIndex, setNavigationIndex] = useState(0)
  const [navigationRoutes] = useState([
    { key: 'music', title: 'Music', icon: 'inbox' },
    { key: 'albums', title: 'Albums', icon: 'album' },
    { key: 'recents', title: 'Recents', icon: 'history' },
  ])

  return (
    <BottomNavigation
      shifting={true}
      navigationState={{ navigationIndex, navigationRoutes }}
      onIndexChange={index => setNavigationIndex(index)}
      renderScene={ BottomNavigation.SceneMap({
        music: MusicRoute,
        albums: AlbumsRoute,
        recents: RecentsRoute,
      })}
    />
  );
}

这是错误：

在此先感谢，沃尔克

标签： javascriptreactjsreact-nativereact-native-paper

Answer 1

BottomNavigation.navigationState 遵循此方法签名：

Type: { index: number; routes: Route[]; }

https://callstack.github.io/react-native-paper/bottom-navigation.html#navigationState

尝试更新您的代码。导航库抱怨路线未定义。在 navigationState 中使用路由而不是 navigationRoutes。

export default function App() {
  // ....
  return (
    <BottomNavigation
      shifting={true}

      // change navigationState object to match expected method signature
      navigationState={{ index: navigationIndex, routes: navigationRoutes }}

      onIndexChange={index => setNavigationIndex(index)}
      renderScene={ BottomNavigation.SceneMap({
        music: MusicRoute,
        albums: AlbumsRoute,
        recents: RecentsRoute,
      })}
    />
  );
}