标签: react-navigation

我正在使用 React Native 制作应用程序。我有一个 tabNavigator。

如果我转到第二个选项卡并按顶部导航栏上的后退按钮，它会转到第一个选项卡而不是返回上一个屏幕。

我也在 react-navigation 的示例应用程序中注意到了这种行为，所以也许它是这样制作的。

无论我从哪个选项卡按下后退按钮，我都不能让我的选项卡导航器转到上一个屏幕吗？

我有一个屏幕，它的标题应该从中设置AsyncStorage，许多屏幕正在导航到这个屏幕（所以我不想在我导航的任何地方传递标题）。

由于navigationOptions是static我无法使用this.state，也无法通过读取设置的标题AsyncStorage（因为AsyncStorage是异步:)

在这种情况下，如何更改屏幕本身的标题？

我正在使用子“行”和“按钮”组件动态构建我的“屏幕”。我只使用这种方法是因为我找不到可用于 react-native 的 flex-flow 属性。

所以基本上我是通过数组数组映射来构建每一行，并在行内映射通过每个数组来构建每个按钮。因为需要在按钮中设置 onPress，所以我传递每个的 URL onPress{() => this.props.navigation.navigate({navigationURL})

作为道具，首先到行，然后到按钮。问题是我不断收到错误'Cannot read property 'navigation' of undefined。我确定这是因为只有导航器中的实际“屏幕”才能访问导航道具。我也试过通过

navigation={this.props.navigation}

但没有成功。我浏览了所有文档，似乎找不到任何有用的东西。有没有其他人遇到过类似的情况？

我想问你关于下面图片中选择的部分。

这个部分的名称是什么，我如何在 React Native 中设置它的样式？现在我的 APK 有一个难看的白条，我看不到电池或 WiFi 的水平。

在 React Native 中，我需要从一个屏幕导航到另一个屏幕。但我不明白这个概念。所以，我做了如下，

在 App.js 中

import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {StyleSheet, Text, Alert, View} from 'react-native';
import { Container, Header, Content, Button} from 'native-base';
import { createStackNavigator, createAppContainer } from 'react-navigation';


type Props = {};
export default class App extends Component<Props> {
ShowAlertDialog = () =>{

Alert.alert(

  // This is Alert Dialog Title
  'Lopels',

  // This is Alert Dialog Message. 
  'Welcome to Lopels',
  [
    // First Text Button in Alert Dialog.
    {text: 'Ask …

我创建了一个导航仪反应中使用原生createBottomTabNavigator从https://reactnavigation.org/docs/en/bottom-tab-navigator.html

我遇到的问题是我找不到将标签栏内的标签垂直居中的方法。

正如您在屏幕截图中看到的，选项卡底部总是有蓝色区域。即使我手动设置标签的高度，它们也会向上生长。如果我flex:1为标签栏设置，它占用了一半的屏幕，但蓝色区域仍然存在。

tabBar: {
  backgroundColor: 'blue',
  borderWidth: 2,
  height: 32,
  justifyContent: 'center',
  alignItems: 'center',
  padding: 0
},
labelStyle: {
  backgroundColor: 'green',
},
tabStyle: {
  backgroundColor: 'yellow',
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'center',
  borderWidth: 1,
  borderColor: 'black',
  marginBottom: 0,
  paddingBottom: 0,
},

这就是我创建导航栏的方式（为了简单起见，我删除了图标）：

const TabNavigator = createBottomTabNavigator(
  {
    screen1: { screen: screen1 },
    screen2: { screen: screen2 },
    screen3: { screen: screen3 },
    screen4: { screen: screen4 },
  },
  {
    tabBarOptions: …

在我设置高度之前，它看起来像这样，注意在 tabBar 上方有一条线。

我像这样更改 tabBar 高度

{
    initialRouteName: "Find",
    tabBarOptions: {
        activeTintColor: '#0a0a0a',
        labelStyle: {
            fontSize: ScreenUtil.scale(14),
        },
        style: {
            backgroundColor: '#f7f7f7',
            //----------add this line------------------------//
            height: 70;
        },
    }
}

结果是这样的，那条线现在已经消失了。

如果我想更改tabBar高度并保持该行，我该怎么办？

我得到的错误在 github上有详细描述。基本上地铁捆绑器失败并出现以下错误：

错误：捆绑失败：类型错误：无法在 C:\Apps\MyProject 处读取未定义的属性“地图” \rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33 at Generator.next () 在步骤 (C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298: 30) 在 C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:309:15 在 DELTA [android, dev] ....../index.js ?????? ？？？？？？？？？14.7% (221/612)，失败。

此错误消息对我没有多大帮助，因为我对 Metro 捆绑器的工作方式没有深入了解。

所以我检查了我最近在代码中所做的更改，例如我在我的项目中添加了以下内容：

"react-native-tab-view": "^1.3.2",

在那之后，我在 package-lock.json 中有一个奇怪的变化。那里似乎已经存在 react-native-tab-view ，我猜是因为它是我之前导入的另一个项目的依赖项。这是 package-lock.json 中的第一个变化：

好吧，无论如何，这对我来说仍然可以。奇怪的是我看到的第二个变化：

等等，什么？旧版本号为 0.0.77 的 react-navigation-deprecated-tab-navigator 中添加了对 react-native-tab-view 的依赖？这看起来很奇怪，至少对我来说。

有人可以在这里帮助我 - 这种变化是否正常，或者这可能是 Metro bundler 失败的原因？

任何输入表示赞赏！

    HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}

        />
    ),
    tabBarOptions: {
        activeTintColor: '#cd077d',

    },
};

我正在尝试更改TabBarIcon的颜色我尝试了 ActiveTintColor 但这似乎只是更改了文本颜色而不是图标颜色，它当前处于活动状态时默认为蓝色。

我开发了一个使用导航抽屉的应用程序。导航屏幕使用导航抽屉。但导航时屏幕不刷新。我如何解决这个问题