React Native Expo启动页后出现空白白屏的问题

Question

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

- MANOJ H M

---

我遇到了同样的问题，但如果我在设备上杀死应用程序，它第二次就会启动。 - Angel Venchev

我已经解决了我的问题。问题与在App.js文件中预加载一些字体和图像有关，如果您仍然没有解决它。 - Angel Venchev

修复了什么？你移除它们了吗？请帮忙。 - ManishKumar

@AngelVenchev 这是我的问题，谢谢！ - Nick Sinai

@AngelVenchev 我的代码也遇到了同样的问题，我正在预加载字体。你是如何解决白屏而不是自定义启动画面的问题的？ - user882290

Answer 1

我认为问题出在这里：

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();
    });
  }

看起来在字体加载过程中出现了错误，而且从未将 isReady 设置为 true

尝试按照以下方式重写代码：

  _loadFontsAsync() {
    Font.loadAsync(customFonts).finally(() => {
      this.setState({ isReady: true }, () => {
        this.authListener();
      });
    });
  }

  componentDidMount() {
    this._loadFontsAsync();
  }

- Kirill Novikov

Answer 2

有很多解决方案被提出，但要真正理解您的问题，您需要查看Expo如何推荐调试生产问题。

具体来说，我运行了expo start --no-dev --minify，并查看是否可以重现该问题。（注意：这不会在更改代码时刷新，因此您需要退出Expo Go应用程序并重新启动它以查看更改。）

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

- Taku

---

你好 Taku，你使用的 SDK 版本是什么？ - J. Jerez