Question

我已经开始尝试react-native，特别是使用create-react-native-app脚本的最新方法。一切似乎完美无缺地开箱即用，但当我尝试使用react-navigation导航我的应用程序时，它仅适用于iOS，因为Android无法呈现任何没有错误的内容。以下snack是如何使用它的示例，如果您在底部切换操作系统，它会演示此问题。

Answer 1

已经在别处回答了这个问题，但是为了StackOverflow的好处

如果您在Android上获得了一个空白屏幕，并且您没有专门为任何类型的React Navigation元素定义宽度，请尝试设置宽度。

这是一个应该在Android上显示的更新小吃：https://snack.expo.io/BJZ_aoOol

对于无上下文的示例，样式应用于TabNavigator的TabNavigatorConfig中，有关详细信息，请参阅React Navigation Docs

const MainScreenNavigator = TabNavigator({
  First: { screen: FirstScreen },
  Second: { screen: SecondScreen },
},{
  tabBarOptions: {
    style: {
      width: 300,
    },
  },
});

您还可以使用以下设备基于每台设备设置此宽度：

let screenWidth = Dimensions.get("window").width;

Answer 2

我也在寻找类似的东西。在您的代码中，我认为您必须将TabNavigator更改为StackNavigator。然后我同意Peter Evans未在android中显示的屏幕，因为实际上它可以工作，但我们必须将Dimension定义为屏幕的宽度（在android上）。

我的解决方案：在第64行添加： <MainScreenNavigator style={{width: Dimensions.get("window").width}} />

现在我继续我的实验以使用redux。

Answer 3

我只是尝试以下内容，它适用于我自己：

import React from "react";
import { View, StyleSheet } from "react-native";
import { StackNavigator } from "react-navigation";
import Expo from "expo";

import Home from "./Home";
import About from "./About";

const routes = {
  Home: {
    name: "Home",
    screen: Home
  },
  About: {
    name: "About",
    screen: About
  }
};

const MainApp = StackNavigator(routes);

export default class Navigation extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MainApp />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
});

不要忘记在Component文件中添加如下所示的代码段。

 static navigationOptions = {
        title: 'About',
    };

如何将反应导航与create-react-native-app（CRNA）一起用于Android版本

3 个答案: