2

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

4

3 回答 3

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;
于 2017-04-03T16:39:01.823 回答
0

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

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

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

于 2017-07-17T07:50:20.097 回答
0

我只是尝试以下方法，它适用于我自己：

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

不要忘记在您的组件文件中添加如下代码片段。

 static navigationOptions = {
        title: 'About',
    };
于 2017-07-25T11:49:19.747 回答