Question

我试图从stackoverflow和github尝试所有可能的解决方法..它在expo上工作正常..但是expo build apk大小很大，所以我想使用react native cli。我已经在app.js中导入了所有scrren组件他们工作的问题是我猜在Drawer.js中。这是我的Drawer.js代码

import React from 'react';
import {View, Button, Text, Image, StyleSheet} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {
  DrawerItem,
  createDrawerNavigator,
  DrawerContentScrollView,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';
import {
  AntDesign,
  MaterialCommunityIcons,
  FontAwesome5,
} from 'react-native-vector-icons';

import {LinearGradient} from 'react-native-linear-gradient';

// screens
import Dashboard from '../screens/Corona';
import Messages from '../screens/tes';
import Contact from '../screens/Dashboard';
import WHO from '../screens/WHO';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const Screens = ({navigation, style}) => {
  return (
    <Animated.View style={StyleSheet.flatten([styles.stack, style])}>
      <Stack.Navigator
        screenOptions={{
          headerTransparent: true,
          headerTitle: null,
          headerLeft: () => (
            <Button transparent onPress={() => navigation.openDrawer()}>
              <MaterialCommunityIcons
                name="menu"
                size={24}
                color="#ff5c2c"
                style={{paddingHorizontal: 10}}
              />
            </Button>
          ),
        }}>
        <Stack.Screen name="Home">
          {props => <Dashboard {...props} />}
        </Stack.Screen>
        <Stack.Screen name="Messages">
          {props => <Messages {...props} />}
        </Stack.Screen>
        <Stack.Screen name="Contact">
          {props => <Contact {...props} />}
        </Stack.Screen>
        <Stack.Screen name="WHO">{props => <WHO {...props} />}</Stack.Screen>
      </Stack.Navigator>
    </Animated.View>
  );
};

const DrawerContent = props => {
  return (
    <DrawerContentScrollView
      {...props}
      scrollEnabled={false}
      contentContainerStyle={{flex: 1}}>
      <View>
        <View flex={0.4} margin={20} bottom>
          <Image
            source={{
              uri: 'https://i.ibb.co/6s5NRyh/output-onlinepngtools.png',
              height: 60,
              width: 60,
              scale: 0.5,
            }}
            resizeMode="center"
            style={styles.avatar}
          />
          <Text white title>
            Covid-19 CoronaVirus Outbreak
          </Text>
        </View>
        <View>
          <DrawerItem
            label="CORONA UPDATE"
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('Home')}
            icon={() => (
              <MaterialCommunityIcons name="update" color="white" size={16} />
            )}
          />
          <DrawerItem
            label=" DONATE বিদ্যানন্দ - Bidyanondo"
            labelStyle={{color: 'white', marginLeft: -16}}
            style={{alignItems: 'flex-start', marginVertical: 0}}
            onPress={() => props.navigation.navigate('Messages')}
            icon={() => <FontAwesome5 name="donate" color="white" size={16} />}
          />
          <DrawerItem
            label="INFORMATION"
            labelStyle={{color: 'white', marginLeft: -16}}
            style={{alignItems: 'flex-start', marginVertical: 0}}
            onPress={() => props.navigation.navigate('Contact')}
            icon={() => (
              <MaterialCommunityIcons
                name="information"
                color="white"
                size={16}
              />
            )}
          />
          <DrawerItem
            label="WHO INFORMATION"
            labelStyle={{color: 'white', marginLeft: -16}}
            style={{alignItems: 'flex-start', marginVertical: 0}}
            onPress={() => props.navigation.navigate('WHO')}
            icon={() => (
              <MaterialCommunityIcons
                name="information"
                color="white"
                size={16}
              />
            )}
          />
        </View>
      </View>
    </DrawerContentScrollView>
  );
};

export default () => {
  const [progress, setProgress] = React.useState(new Animated.Value(0));
  const scale = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });
  const borderRadius = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, 16],
  });

  const animatedStyle = {borderRadius, transform: [{scale}]};

  return (
    <LinearGradient style={{flex: 1}} colors={['#050505', '#2B2f37']}>
      <Drawer.Navigator
        // hideStatusBar
        drawerType="slide"
        overlayColor="transparent"
        drawerStyle={styles.drawerStyles}
        contentContainerStyle={{flex: 1}}
        drawerContentOptions={{
          activeBackgroundColor: 'transparent',
          activeTintColor: 'white',
          inactiveTintColor: 'white',
        }}
        sceneContainerStyle={{backgroundColor: 'transparent'}}
        drawerContent={props => {
          setProgress(props.progress);
          return <DrawerContent {...props} />;
        }}>
        <Drawer.Screen name="Screens">
          {props => <Screens {...props} style={animatedStyle} />}
        </Drawer.Screen>
      </Drawer.Navigator>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  stack: {
    flex: 1,
    shadowColor: '#FFF',
    shadowOffset: {
      width: 0,
      height: 8,
    },
    shadowOpacity: 0.44,
    shadowRadius: 10.32,
    elevation: 5,
    // overflow: 'scroll',
    // borderWidth: 1,
  },
  drawerStyles: {flex: 1, width: '50%', backgroundColor: 'transparent'},
  drawerItem: {alignItems: 'flex-start', marginVertical: 0},
  drawerLabel: {color: 'white', marginLeft: -16},
  avatar: {
    borderRadius: 60,
    marginBottom: 16,
    borderColor: 'white',
    borderWidth: StyleSheet.hairlineWidth,
  },
});

我的App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import ApolloClient from 'apollo-boost';
import {ApolloProvider} from '@apollo/react-hooks';
import Drawer from './navigation/Drawer';

const client = new ApolloClient({
  uri: 'https://covid19-graphql.now.sh/',
});

export default () => {
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        <Drawer />
      </NavigationContainer>
    </ApolloProvider>
  );
};

Answer 1

更改导出默认值（）=> 成为导出默认类{}

它看起来不知道要导出什么，也许给出“类”的类型，因为它是未定义的，而不是类或函数。

我使用cli，这是我的代码，它工作正常。 FYR ..

export default class className extends React.Component {
  constructor() {
    super();
    this.state = {

    };
  }

  render() {

    return (
      <View>

      <View>
    );
  }
}

我正在获取元素类型无效：预期为字符串或类/函数

1 个答案: