javascript - 启动画面后 react native 博览会空白屏幕

Question

> 应用程序.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 并尝试将其安装在我的物理设备中时，它会显示启动画面，然后显示白色空白屏幕。也不路由到登录组件或仪表板组件

Answer 1

提出了许多解决方案，但要真正了解您的问题，您需要查看 how Expo recommends debugging production issues .

具体来说，我所做的是运行 expo start --no-dev --minify 并查看是否可以重现该问题。 (注意:当您更改代码时，这不会刷新，因此您需要退出 Expo Go 应用程序并重新启动它才能看到更改。)

对于我的问题，我能够使用上述方法在本地重现，并且我在 FlatList 中缺少 keyExtractor={(_, id) => id.toString()} 。