标签: react-native-navigation

活动色调颜色在反应本机底部选项卡导航器中不起作用。焦点时名称的颜色确实会改变，但图标颜色不会改变。这是我的导航器

<Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, tintColor, size}) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused
              ? 'chatbubble-ellipses-sharp'
              : 'chatbubble-ellipses-outline';
          } else if (route.name === 'Setting') {
            iconName = focused ? 'settings-sharp' : 'settings-outline';
          }

          // You can return any component that you like here!
          return (
            <Icon
              name={iconName}
              size={size}
              color={tintColor}
              type={'Ionicons'}
            />
          );
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Setting" component={Setting} />
    </Tab.Navigator>
  );
}

即使我像<Icon …

我有一个带有表格的屏幕。现在，在该表单中，有一个按钮可以打开另一个屏幕，用户可以在其中选择目标选项，选择后，他们将导航回原始表单（堆栈导航器），原因是用户还可以在那里创建一个新选项，以便他们转到与单独编辑选项时的用户界面相同（他们可以）。

我的解决方案下面的代码有效，但我收到以下警告：

在导航状态中发现不可序列化的值。这可能会破坏持久化和恢复状态等使用。如果您在参数中传递不可序列化的值（例如函数、类实例等），则可能会发生这种情况。如果您需要在选项中使用带有回调的组件，则可以使用“navigation.setOptions”。 有关更多详细信息，请参阅 https://reactnavigation.org/docs/5.x/troubleshooting#i-get-the-warning-non-serialized-values-were-found-in-the-navigation-state 。

现在该链接建议使用setOptions，但这更像是在标题中添加按钮，但情况并非如此，用户通过单击选项在目标屏幕中选择该选项。

以下是代码的重要部分：

// MAIN FORM SCREEN
<Button title={"Some Title"} onPress={openSelectItem}></Button>

const openSelectFish = () => {
    return navigation.navigate("ItemList", { sendItemBack: true, onGoBack: onSelectItem });
};

const onSelectItem = (item: ItemDTO) => {
    setItem(item.name); // basic useState
};

// THE OPTIONS SCREEN
const onChooseItem = (item: ItemDTO) => {
    console.log(this);
    if ((typeof route !== "object") || (typeof route.params !== "object")) return;
    if (!route.params.sendItemBack ?? true) return;
    route.params.onGoBack(item);
    return navigation.goBack();
};
// …

我进行搜索并将其与适当的解决方案进行比较，看起来没有什么错，但是我几乎得到了如下所示的错误屏幕；

这里的导航代码有什么问题；

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import About from './app/components/About';

export default class Home extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  navigateToAbout(){
    const { navigate } = this.props.navigation;
    navigate('About')
  }

  render() {

    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>this.navigateToAbout()}>
          <Text>Go to About Page</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const SimpleApp = StackNavigator({
  Home: { screen: Home },
  About: { …

我想知道如何使用 react-native-navigation 动态更改推送屏幕的方向。

我使用 startSingleScreenApp 和 appStyle oforientation: 'portrait' 强制纵向屏幕。我只想让推送的屏幕之一使用“自动”

我尝试了以下方法：

static navigatorStyle = {
   drawUnderTabBar: true,
   orientation: 'auto'
};

我也试过：

componentWillMount() {
   this.props.navigator.setStyle({
      orientation: 'auto'
   });
};

我什至使用以下方法推送到屏幕上：

...
navigatorStyle: {
  orientation:'auto'
}
...

甚至可以动态更改它吗？

我遇到了一个问题，我基本上没有关于如何继续前进的想法。

我有一个带有两个屏幕的 StackNavigator，一个称为“HomeScreen”，另一个称为“SettingsScreen”。当我点击一个按钮时，我会进入“SettingsScreen”。

我还有一个 DrawerNavigator，我可以使用它导航到四个屏幕之一，屏幕 4 是 StackNavigator。

DrawerNavigator:
  Screen1
  Screen2
  Screen3
  Screen4
    - HomeScreen
    - SettingsScreen

（希望它以某种方式可以理解）

所以让我们来解决这个问题......
我的问题是我的“SettingsScreen”具有将项目添加到 AsyncStorage 键的功能（它将它推送到数组，所以最后我有一个列表，我在我的“主屏幕”上呈现)，但是当我添加了该项目并返回到我的“主屏幕”时，它不会重新加载页面。我怎样才能让它在满足某些条件甚至更简单时重新加载页面 - 每次离开“SettingsScreen”时如何重新加载页面？

我在我们的Native Native应用程序中使用Wix反应本机导航V2.我遇到的问题是将数据从一个屏幕传递到另一个屏幕.第一个屏幕包含FLATLIST,当我选择FLATLIST行时,我需要导航并在另一个屏幕上传递行数据.

这是我的代码:

屏幕1:

此代码显示FLATLIST上的行数据(工作正常)

_renderItem = ({ item }) => {
    const text = `${item}`;
    return (
      <TouchableOpacity onPress={() => this.moveToAnotherScreen(item)}>
        <View style={styles.cardView}>
          <Text style={styles.item2}>{item.name}</Text>
          <Text style={styles.item2}>{item.Type}</Text>
          <Text style={styles.item2}>{item.mobile}</Text>

        </View>
      </TouchableOpacity>
    );
  };

这是moveToAnotherScreen函数

moveToAnotherScreen(item) {
    Navigation.push(this.props.componentId, {
      component: {
        name: 'ShowAnotherScreen',

      },
      passProps: {
        data: item
    }
    });
  }

屏幕2:

componentDidMount() {

    const params  = this.props.data
    console.log('params', params);
  }

实现createDrawerNavigator， 但不起作用。

主要成分

   import React, { Component } from 'react';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';
import { View,Platform } from 'react-native';
import Dishdetail  from './DishdetailComponent';
import Home from './HomeComponent';
import { createStackNavigator,createAppContainer ,createDrawerNavigator } from 'react-navigation';  
import { Icon } from 'react-native-elements';


const MenuNavigator = createStackNavigator({
  Menu: { screen: Menu },
  Dishdetail: { screen: Dishdetail }
},
{
  initialRouteName: 'Menu',
  navigationOptions: {
      headerStyle: {
          backgroundColor: "#512DA8"
      },
      headerTintColor: '#000',
      headerTitleStyle: {
          color: "#fff"            
      } …

我的应用程序中有一个使用 React Native Router Flux 的标签栏。在一些用例中，基于当前用户隐藏或显示特定选项卡会非常有帮助。我遇到的主要是：

• AB 向特定用户测试新标签
• 向具有特定权限的特定用户显示特殊的管理选项卡

从我所见，react-native-router-flux 库不支持任何选项来执行此操作。我怎样才能实现这个功能？

我正在使用 RNN V1 并决定更新到最新版本，因为我需要更多的自定义，它更新到 V3-alpha。不知道这是否是我的错误，如果我应该去最新的 V2 以获得更高的稳定性。问题是，每当我在不同的 Mac 上启动我的项目时，它都会抛出以下错误：

Exception 'Bridge not yet loaded! Send commands after Navigation.events().onAppLaunched() has been called.' was thrown while invoking setDefaultOptions on target RNNBridgeModule with params (
        {
        statusBar =         {
            style = light;
            visible = 1;
        };
        topBar =         {
            visible = 0;
        };
    },
    30,
    31
)
callstack: (

我设置的唯一地方setDefaultOptions是在启动基于选项卡的导航时。

这是代码。

import { Navigation } from 'react-native-navigation';
import { iconsMap } from '../../_global/AppIcons';
import i18n from '../../_global/i18n';
import { navigatorStyle } …

我想在路由参数中设置一个默认值，如果没有从我们以前做过的其他屏幕发送任何内容

let phot0 = this.props.navigation.getParam("photo","empty");

在 react Navigation 5.x 中做什么我的代码是..（第 5 行的困难）

import React from "react";
import { StyleSheet, Text, View, Image, Button } from "react-native";

export default function Home({ route, navigation }) {
  const { photo } = route.params;
  return (
    <View style={styles.container}>
      <Image
        resizeMode="center"
        style={styles.imageHolder}
        source={photo === "empty" ? require("../assets/email.png") : photo}
      />
      <Button
        title="take photo"
        style={styles.button}
        onPress={() => navigation.navigate("Camera")}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center", …