android 当我尝试导航到包含平面列表组件的材料顶部点击导航时,我在React Native中遇到了问题

jgwigjjp  于 2023-05-21  发布在  Android
关注(0)|答案(1)|浏览(148)

我的应用中有一个初始屏幕,其中包含一个按钮,用于使用navigation.navigate('HomeDrawerNavigator' as never)方法导航到我的主屏幕,HomeDrawerNavigator初始屏幕是我的主屏幕,但当我转到主屏幕时,我出现以下错误:
渲染错误:cannot read property“getItem”of undefined此调用堆栈未符号化。某些功能不可用,如查看功能名称或点击打开文件
Error image on android
这是我的抽屉导航,初始屏幕是我的主屏幕

const Drawer = createDrawerNavigator();

export const HomeDrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        drawerPosition: 'right',
      }}
      drawerContent={props => <DrawerContent {...props} />}>
      <Drawer.Screen
        name="HomeScreen"
        options={{title: 'Home'}}
        component={HomeScreen}
      />

      <Drawer.Screen
        name="SettingsScreen"
        options={{title: 'Home'}}
        component={SettingsScreen}
      />
    </Drawer.Navigator>
  );
};

这是我的主屏幕:

export const HomeScreen = ({navigation}: Props) => {
  return (
    <View style={{backgroundColor: 'white', flex: 1}}>
      <NavBar navigation={navigation} />

      <SelectAccount />

      <UserBalanceAndButtons />

      <AssetsTopTapNavigator />
    </View>
  );
};

当我注解AssetsTopTapNavigator组件时,错误被删除,但当我取消注解时,错误返回,此组件具有材料顶部点击导航以导航到平面列表:
资产TopTapNavigator:

const Tab = createMaterialTopTabNavigator();

export const AssetsTopTapNavigator = () => {
  const {
    theme: {colors},
  } = useContext(ThemeContext);

  return (
    <Tab.Navigator
      sceneContainerStyle={{backgroundColor: colors.background}}
      screenOptions={{
        tabBarPressColor: '#72adfb',
        tabBarIndicatorStyle: {backgroundColor: '#72adfb'},
        tabBarStyle: {
          shadowColor: 'transparent',
          elevation: 0,
        },
      }}>
      {/* Display user tokens */}
      <Tab.Screen name="Tokens" component={TokensScreen} />

      {/* Display user transactions */}
      <Tab.Screen name="Transactions" component={TransactionsScreen} />
    </Tab.Navigator>
  );
};

组件TokensScreen和TransactionsScreen具有flatlist:

export const TokensScreen = () => {
  const {
    theme: {colors, currentTheme},
  } = useContext(ThemeContext);

  return (
    <View
      style={{backgroundColor: currentTheme === 'light' ? 'white' : '#323232'}}>
      <FlatList
        data={TokenItems}
        renderItem={({item}) => <Text>{item.symbol}</Text>}
        keyExtractor={token => token.symbol}
      />
    </View>
  );
};

我使用“react-native”:“0.71.7”,带 typescript
如果有人能帮助我,我将非常感激
我已经尝试按照react native文档(https://reactnative.dev/docs/symbolication)中的指南进行操作,但我不知道是否正确,因为在我看来,必须遵循的步骤并不清楚

j5fpnvbx

j5fpnvbx1#

我的兄弟能够解决这个问题,问题是我们使用的库显然与组件中的类一起工作,而在应用程序中我们没有使用组件中的类,所以解决方案是告诉react只有那个库使用这些设置,这在babel.config.js文件中指出:

module.exports = {
  plugins: ['react-native-reanimated/plugin'],
  presets: ['module:metro-react-native-babel-preset'],
  overrides: [
    {
      test: './node_modules/ethers',
      plugins: [
        '@babel/plugin-proposal-private-property-in-object',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-private-methods'
      ]
    }
  ]
};

在这个文件中,react被告知只有ethers库(这是给我们错误的库)使用这些插件配置,并且react native通常继续使用它的插件配置。

相关问题