问题
I'm trying using React Native to create a drawer navigator at an Android project, but i'm gettin a "undefined is not a function", like in this print
here is the code:
import 'react-native-gesture-handler';
import React, { useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import AsyncStorage from '@react-native-community/async-storage';
import {
NavigationContainer,
DefaultTheme as NavigationDefaultTheme,
DarkTheme as NavigationDarkTheme,
} from '../../../node_modules/@react-navigation/native';
import {
Provider as PaperProvider,
DefaultTheme as PaperDefaultTheme,
DarkTheme as PaperDarkTheme,
} from '../../../node_modules/react-native-paper';
import { DrawerContent } from './screens/DrawerContent';
import MainTabScreen from './screens/MainTabScreen';
import SupportScreen from './screens/SupportScreen';
import SettingsScreen from './screens/SettingsScreen';
import BookmarkScreen from './screens/BookmarkScreen';
import { AuthContext } from './components/context';
import RootStackScreen from './screens/RootStackScreen';
const Drawer = createDrawerNavigator();
const App = () => {
// const [isLoading, setIsLoading] = React.useState(true);
// const [userToken, setUserToken] = React.useState(null);
const [isDarkTheme, setIsDarkTheme] = React.useState(false);
const initialLoginState = {
isLoading: true,
userName: null,
userToken: null,
};
const CustomDefaultTheme = {
...NavigationDefaultTheme,
...PaperDefaultTheme,
colors: {
...NavigationDefaultTheme.colors,
...PaperDefaultTheme.colors,
background: '#ffffff',
text: '#333333',
},
};
const CustomDarkTheme = {
...NavigationDarkTheme,
...PaperDarkTheme,
colors: {
...NavigationDarkTheme.colors,
...PaperDarkTheme.colors,
background: '#333333',
text: '#ffffff',
},
};
const theme = isDarkTheme ? CustomDarkTheme : CustomDefaultTheme;
const loginReducer = (prevState, action) => {
// eslint-disable-next-line default-case
switch (action.type) {
case 'RETRIEVE_TOKEN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'LOGIN':
return {
...prevState,
userName: action.id,
userToken: action.token,
isLoading: false,
};
case 'LOGOUT':
return {
...prevState,
userName: null,
userToken: null,
isLoading: false,
};
case 'REGISTER':
return {
...prevState,
userName: action.id,
userToken: action.token,
isLoading: false,
};
}
};
const [loginState, dispatch] = React.useReducer(
loginReducer,
initialLoginState
);
const authContext = React.useMemo(
() => ({
signIn: async (foundUser) => {
// setUserToken('fgkj');
// setIsLoading(false);
const userToken = String(foundUser[0].userToken);
const userName = foundUser[0].username;
try {
await AsyncStorage.setItem('userToken', userToken);
} catch (e) {
console.log(e);
}
// console.log('user token: ', userToken);
dispatch({ type: 'LOGIN', id: userName, token: userToken });
},
signOut: async () => {
// setUserToken(null);
// setIsLoading(false);
try {
await AsyncStorage.removeItem('userToken');
} catch (e) {
console.log(e);
}
dispatch({ type: 'LOGOUT' });
},
signUp: () => {
// setUserToken('fgkj');
// setIsLoading(false);
},
toggleTheme: () => {
// eslint-disable-next-line no-shadow
setIsDarkTheme((isDarkTheme) => !isDarkTheme);
},
}),
[]
);
useEffect(() => {
setTimeout(async () => {
// setIsLoading(false);
let userToken;
userToken = null;
try {
userToken = await AsyncStorage.getItem('userToken');
} catch (e) {
console.log(e);
}
// console.log('user token: ', userToken);
dispatch({ type: 'RETRIEVE_TOKEN', token: userToken });
}, 1000);
}, []);
if (loginState.isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
return (
<PaperProvider theme={theme}>
<AuthContext.Provider value={authContext}>
<NavigationContainer theme={theme}>
{loginState.userToken !== null ? (
<Drawer.Navigator
drawerContent={(props) => <DrawerContent {...props} />}
>
<Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
<Drawer.Screen name="SupportScreen" component={SupportScreen} />
<Drawer.Screen name="SettingsScreen" component={SettingsScreen} />
<Drawer.Screen name="BookmarkScreen" component={BookmarkScreen} />
</Drawer.Navigator>
) : (
<RootStackScreen />
)}
</NavigationContainer>
</AuthContext.Provider>
</PaperProvider>
);
};
export default App;
If I change the "createDrawerNavigator" to "createStackNavigator", like
import { createDrawerNavigator } from '@react-navigation/drawer';
TO
import { createStackNavigator} from '@react-navigation/stack';
&&
const Drawer = createDrawerNavigator();
TO
const Drawer = createStackNavigator();
It works perfectly, but I don't want a stack, I want a drawer.
I've installed the react-navigation like this:
yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
And I had to make a few changes in MainActivity.java, that now is looking like this:
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "Tracker";
}
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
Here is all the dependencies:
"dependencies": {
"@mauron85/react-native-background-geolocation": "^0.6.3",
"@react-native-community/async-storage": "^1.9.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/drawer": "^5.8.2",
"@react-navigation/material-bottom-tabs": "^5.1.6",
"@react-navigation/native": "^5.5.1",
"@react-navigation/stack": "^5.0.6",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-action-button": "^2.8.5",
"react-native-animatable": "^1.3.3",
"react-native-background-timer": "^2.2.0",
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera.git",
"react-native-geolocation-service": "^5.0.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-maps": "^0.27.1",
"react-native-paper": "^3.6.1",
"react-native-reanimated": "^2.0.0-alpha.3",
"react-native-safe-area-context": "^3.0.5",
"react-native-screens": "^2.9.0",
"react-native-vector-icons": "^6.6.0",
"rn-fetch-blob": "^0.12.0"
},
Can somebody PLEASE help me??
回答1:
Fixed!
All I had to do was install react-native-reanimated and NOT to do the manual steps that the documentation shows. (In my case, undo the manual steps) Seems like there it shows the steps to react-native-reanimated@alpha, (version 2.x.x) that looks like it's still not working properly, specially with createDrawerNavigation.
yarn install react-native-reanimated@alpha NO
yarn install react-native-reanimated YES
来源：https://stackoverflow.com/questions/62510916/createdrawernavigator-undefined-is-not-a-function