标签: react-navigation

我正在我的React Native应用程序中实现React Navigation,我想要更改标题的背景和前景色.我有以下内容:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class ReactNativePlayground extends Component {

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

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your …

例如,当你有一个表单组件,并且需要使用导航栏中的按钮提交组件状态的一部分时,如何处理案例？

const navBtn = (iconName, onPress) => (
  <TouchableOpacity
    onPress={onPress}
    style={styles.iconWrapper}
  >
    <Icon name={iconName} size={cs.iconSize} style={styles.icon} />
  </TouchableOpacity>
)

class ComponentName extends Component {

  static navigationOptions = {
    header: (props) => ({
      tintColor: 'white',
      style: {
        backgroundColor: cs.primaryColor
      },
      left: navBtn('clear', () => props.goBack()),
      right: navBtn('done', () => this.submitForm()), // error: this.submitForm is not a function
    }),
    title: 'Form',
  }

  constructor(props) {
    super(props);
    this.state = {
      formText: ''
    };
  }

  submitForm() {
    this.props.submitFormAction(this.state.formText)
  }

  render() {
    return (
      <View>
        ...form …

在撰写本文时,Docs没有提供对SwitchNavigator目的的描述.

我已经尝试过使用两者StackNavigator并且SwitchNavigator可以互换,我个人无法发现差异.虽然我确信有.

任何人都可以解释一下这个额外的好处SwitchNavigator是StackNavigator什么？或者一个人可能会使用它而不是另一个的情景？

我正在使用react-navigation v2和react本地矢量图标。

我正在尝试在react native选项卡导航器中添加一个图标。

如果图标不在选项卡导航器中，则会显示该图标。该图标未在选项卡导航器中显示，并且我找不到如何在选项卡导航器中添加图标的可靠示例。

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { createMaterialTopTabNavigator } from 'react-navigation'

import Home from '../HomePage.js'
import Profile s from '../ProfilePage.js'

import Icon from 'react-native-vector-icons/FontAwesome';

export const Tabs = createMaterialTopTabNavigator(
  {
    HomePage: {
      screen: Home,

      navigationOptions: {
        tabBarLabel:"Home Page",
        tabBarIcon: ({ tintColor }) => (
          <Icon name="home" size={30} color="#900" />
        )
      },
    },
    ProfilePage: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel:"Profile Page",
        tabBarIcon: ({ tintColor }) => …

我正在我的应用程序中使用React Navigation,并且我有一个嵌套在Stack Navigator中的Tab Navigator.有时在应用程序中,导航堆栈是:

屏幕A => Tab Navigator =>屏幕B.

因此,当用户在屏幕B中并按下后退按钮时,它首先触发选项卡导航器中的后退操作,并且只有在选项卡导航器中没有可用的goBack操作时才触发屏幕B中的goBack操作.

因此,当用户在屏幕B中并在选项卡之间导航时,用户会收到意外行为.用户一直按下后退按钮,直到选项卡导航器返回到第一个选项卡,然后,在按下后退按钮后,它从屏幕B返回到选项卡.

无论如何我能在这种情况下达到预期的行为吗？

我正在尝试从中获取我的事件对象，route.params但我不知道如何让打字稿识别此道具。

这是导航到我的详细信息页面的函数，将事件传递给参数：

const navigateToDetail = (incident: IncidentProps): void => {
    navigation.navigate('Detail', { incident });
  };

这是我尝试从 route.params 获取此对象的详细信息页面代码的一部分：

type IncidentRouteParams = {
  incident: IncidentProps;
}

const Detail: React.FC = () => {
  const navigation = useNavigation();
  const route = useRoute();

  const incident = route.params.incident;

我想我需要以某种方式将这个IncidentRouteParams类型传递给const route = useRoute()

提前致谢。

这是带有错误的图像：

编辑：

我确实喜欢这个，并且它有效，但我不知道它是否是正确的方法：

  const route = useRoute<RouteProp<Record<string, IncidentRouteParams>, string>>();

  const incident = route.params.incident;

我只是将我的本机应用程序升级到 0.62.0，现在我的应用程序不断收到此警告标志

ReactNativeFiberHostComponent: Calling `getNode()` on the ref of an Animated component 
is no longer necessary. You can now directly use the ref instead. 
This method will be removed in a future release.

我不确定为什么会出现这个问题？有人可以解释一下吗？

我也看到堆栈

ref.getNode |
createAnimatedComponent.js:129:20

SafeView#_updateMeasurements | index.js:192:14

SafeView#componentDidUpdate | index.js:154:9

更新

我相信这可能来自 react-navigation 的 SafeAreaView

我正在尝试在我的 RN 项目中使用 React Navigation，但是当我安装react-native-screens（这是它工作所需的包）时，我无法再次构建该项目。

我得到的错误如下：

Task :react-native-screens:compileDebugKotlin FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

我尝试了一些我看到其他人做的事情，但到目前为止没有任何效果。

你能帮助我吗？谢谢

我正在创建一个带有 react-native 的登录系统，下载后"react-native-gesture-handler" dependencies: "^ 1.1.0"并"react-navigation": "^ 3.5.1"开始出现以下消息错误：

null 不是对象（评估 'rngesturehandlermodule.direction'）

我试图删除项目并重新修改它，删除并重新安装 node_modules 文件夹并重新安装依赖项，但没有任何效果。

我正在尝试使用 React Navigation 制作如下图所示的标签栏。

我尝试了一些代码，但没有任何效果。一些代码来自之前的 React 导航版本。真正的问题是使标签栏从底部和两侧都有边距，并且边框是圆形的。

任何人都可以帮助我吗？！