〉应用程序json
{
"expo": {
"name": "Csearch",
"slug": "Csearch",
"version": "1.0.0",
"orientation": "portrait",
"sdkVersion": "38.0.0",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#2e64ae"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"android": {
"package": "com.geekonomy.Csearch",
"versionCode": 1
},
"ios": {
"supportsTablet": true
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/drawer": "^5.8.6",
"@react-navigation/native": "^5.7.1",
"@react-navigation/stack": "^5.7.1",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"firebase": "^7.17.1",
"native-base": "^2.13.13",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-easy-grid": "^0.2.2",
"react-native-elements": "^2.0.4",
"react-native-gesture-handler": "~1.6.0",
"react-native-maps": "^0.27.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-web": "~0.11.7",
"react-router-native": "^5.2.0"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
App.js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {},
isReady: false,
};
}
authListener() {
fire.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({ user });
} else {
this.setState({ user: null });
}
});
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
...Ionicons.font,
});
this.setState({ isReady: true }, () => {
this.authListener();
});
}
render() {
if (!this.state.isReady) {
return <AppLoading />;
}
return (
<NativeRouter>
<BackButton />
<Switch>
<Route exact path="/">
{this.state.user ? <DashBoard /> : <Login />}
</Route>
<Route path="/criminalDetails" component={ShowSelectedCriminals}>
{/* {this.state.user ? <ShowSelectedCriminals /> : <Login />} */}
</Route>
<Route path="/gangDetails" component={SelectedGangDetails}>
{/* {this.state.user ? <SelectedGangDetails /> : <Login />} */}
</Route>
<Route path="/gangCriminalDetails" component={GangCriminalDetails}>
{/* {this.state.user ? <GangCriminalDetails /> : <Login />} */}
</Route>
<Route path="/ShowGangs">
{this.state.user ? <ShowGangs /> : <Login />}
</Route>
<Route path="/Showdata">
{this.state.user ? <Showdata /> : <Login />}
</Route>
</Switch>
</NativeRouter>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
Login.js
class Login extends Component {
constructor(props) {
super(props);
this.login = this.login.bind(this);
this.state = {
email: "",
password: "",
};
}
login() {
fire
.auth()
.signInWithEmailAndPassword(this.state.email, this.state.password)
.then((u) => {
console.log(u);
})
.catch((error) => {
console.log(error);
});
}
render() {
return (
<View style={styles.container}>
{/* <Image
style={{
height: 25,
width: 25,
}}
source={require("../assets/login.png")}
/> */}
<Item floatingLabel>
<Label>Email</Label>
<Input onChangeText={(email) => this.setState({ email })} />
</Item>
<Item floatingLabel last>
<Label>Password</Label>
<Input
secureTextEntry={true}
onChangeText={(password) => this.setState({ password })}
placeholder="Password"
/>
</Item>
<Item
style={{
marginTop: 10,
marginBottom: 10,
justifyContent: "center",
alignItems: "center",
borderBottomColor: "white",
}}
>
<Button info onPress={this.login}>
<Text> Login </Text>
</Button>
</Item>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#2e64ae",
},
});
export default Login;
DashBoard.js
const Drawer = createDrawerNavigator();
const DashBoardStack = createStackNavigator();
const ShowGangsStack = createStackNavigator();
const ShowCriminalsStack = createStackNavigator();
const DashBoardStackScreen = ({ navigation }) => (
<DashBoardStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#2e64ae",
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<DashBoardStack.Screen
name="DashBoard"
component={InitialDb}
options={{
title: "CSearch",
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<Entypo name="menu" size={24} color="black" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity onPress={() => fire.auth().signOut()}>
<AntDesign name="logout" size={24} color="black" />
</TouchableOpacity>
),
}}
/>
</DashBoardStack.Navigator>
);
const ShowGangsStackStackScreen = ({ navigation }) => (
<ShowGangsStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#2e64ae",
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<ShowGangsStack.Screen
name="ShowGangs"
component={ShowGangs}
options={{
title: "CSearch",
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<Entypo name="menu" size={24} color="black" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity onPress={() => fire.auth().signOut()}>
<AntDesign name="logout" size={24} color="black" />
</TouchableOpacity>
),
}}
/>
</ShowGangsStack.Navigator>
);
const ShowCriminalsStackScreen = ({ navigation }) => (
<ShowCriminalsStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#2e64ae",
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<ShowCriminalsStack.Screen
name="ShowCriminals"
component={ShowData}
options={{
title: "CSearch",
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<Entypo name="menu" size={24} color="black" />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity onPress={() => fire.auth().signOut()}>
<AntDesign name="logout" size={24} color="black" />
</TouchableOpacity>
),
}}
/>
</ShowCriminalsStack.Navigator>
);
export default class DashBoard extends React.Component {
render() {
return (
<>
{/* <Image
style={{ width: 400, height: 400, borderRadius: 400 / 2 }}
source={require("../assets/login.png")}
/> */}
<NavigationContainer>
<BackButton />
<Drawer.Navigator initialRouteName="DashBoard">
<Drawer.Screen name="DashBoard" component={DashBoardStackScreen} />
<Drawer.Screen
name="ShowGangs"
component={ShowGangsStackStackScreen}
/>
<Drawer.Screen
name="ShowCriminals"
component={ShowCriminalsStackScreen}
/>
</Drawer.Navigator>
</NavigationContainer>
</>
);
}
}
这里,在上面的代码中,当在Metro Bundler中运行它时,使用expo run android命令,应用程序在expo中正常运行,没有任何问题或错误。但是当我使用expo build:android构建apk,并尝试将其安装到我的物理设备中时,它会显示闪屏,之后它会显示白色空白屏幕。也不会路由到登录组件或 Jmeter 板组件
2条答案
按热度按时间hgb9j2n61#
有许多解决方案提出,但要真正了解您的问题,您需要看看如何博览会建议调试生产问题。
具体来说,我所做的就是运行
expo start --no-dev --minify
,看看是否可以重现这个问题。(注意:当您更改代码时,此窗口不会刷新,因此您需要退出Expo Go应用程序,然后重新启动它以查看更改。)对于我的问题,我能够使用上述方法在本地重现,但我在
FlatList
中缺少keyExtractor={(_, id) => id.toString()}
。knpiaxh12#
我觉得问题就在这里:
看起来您在字体加载期间遇到错误,并且从未将
isReady
设置为true
试着重写如下: