我在我的React Native项目中安装了react-navigation.它的启动项目没有任何代码.但是在运行项目时我遇到了这样的错误.

这是我的导航代码

import { createStackNavigator } from 'react-navigation';

import Home from './screens/Home';
import WeatherDetail from './screens/WeatherDetail';


const Navigation = createStackNavigator({
  Home: { screen: Home },
  WeatherDetail: {
  screen: WeatherDetail
 } 
});

export default Navigation;

这是App.js代码

 import Navigator from './Router';


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

如果我从App.js中删除导航器组件并将其替换为Text,则应用程序运行时不会出现任何错误.

当我想要构建我的 APK 时，出现以下错误。

导出命名空间应首先转换为 @babel/plugin-proposal-export-namespace-from

我需要说我已经导入react-native-gesture-handler了index.js

这是我的index.js

import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './app/App';
import {name as appName} from './app.json';

import { LogBox } from 'react-native';
LogBox.ignoreAllLogs();


AppRegistry.registerComponent(appName, () => App);

在开发模式下，我没有收到该错误。

这是我的 package.json

{
  "name": "blackout",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.6",
    "@react-native-community/geolocation": "^2.1.0",
    "@react-native-community/netinfo": "^9.0.0",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2", …

当我使用 useNavigation 或 props { navigation } 使用 navigation.navigate('Home') 在屏幕之间导航时，打字稿返回错误 Argument of type '"Main"' is not allocate to type '{ key: string; 参数？：未定义；合并？：布尔值 | 不明确的; } | { 名称：从不；键？： 字符串 | 不明确的; 参数：从不；合并？：布尔值 | 不明确的; }' 这是什么意思？

下面是我的代码：

import React from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';

const Home: React.FC = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: …

当我想在屏幕打开时做一些动作时,我把它们放在componentDidMount中.例如,我可以获取一些数据.

像这样.

componentDidMount() {
  this.updateData();
}

但是反应导航componentDidMount只在用户第一次打开屏幕时出现一次,如果以后用户再次打开此页面则不会触发componentDidMount.

检测页面(屏幕)何时被激活并执行操作的正确方法是什么？

我在我的应用程序中使用React-Navigation,该应用程序包含多个屏幕的StackNavigator,其中一些屏幕具有TextInput, autoFocus={true}

问题:在组件渲染时在这些屏幕上,屏幕的高度在构造函数中设置:

constructor(props) {
    super(props);
    this.state = { 
        height: Dimensions.get('window').height,
    };
}

但是,由于autoFocusTextInput是true,因此在渲染后,屏幕上的键盘几乎立即弹出,导致组件重新渲染,因为在componentWillMount中添加到Keyboard的eventListener:

 componentWillMount() {
    this.keyboardWillShowListener = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow.bind(this)
    );
}

keyboardWillShow(e) {
    this.setState({
        height:
            Dimensions.get("window").height * 0.9 - e.endCoordinates.height
    });
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}

这会影响性能,我希望避免不必要的重新渲染.

问题:
1.是否可以在React-Navigation的ScreenProps中设置键盘的动态高度(取决于设备)？
2. React-Navigation的state.params是否可以这样做？
3.除了应用KeyboardAvoidingView或此模块之外,还有其他方法可以解决此问题吗？

注意：此查询适用于react-navigation 5。

在 React Navigation 4 中，我们可以在导航时将函数作为参数传递，但在 React Navigation 5 中，它会抛出有关序列化参数的警告。

基本上，我想做的是，从父屏幕导航到子屏幕，获取新值并更新父屏幕的状态。

以下是我目前实施的方式：

家长屏幕

_onSelectCountry = (data) => {
    this.setState(data);
};
.
.
.

<TouchableOpacity
    style={ styles.countrySelector }
    activeOpacity={ 0.7 }
    onPress={ () => Navigation.navigate("CountrySelect",
        {
             onSelect: this._onSelectCountry,
             countryCode: this.state.country_code,
        })
    }
>
.
.
.
</TouchableOpacity> 

儿童屏幕

_onPress = (country, country_code, calling_code) => {
    const { navigation, route } = this.props;
    navigation.goBack();
    route.params.onSelect({
        country_name: country,
        country_code: country_code,
        calling_code: calling_code
    });
};

我正在使用react-navigation实现2个屏幕.但是在导航到第二页时我收到了以下警告:

警告:在简单的Javascript类中不推荐使用isMounted(...).相反,请确保清除componentWillUnmount中的订阅和挂起请求以防止内存泄漏.

版本:

• 反应:16.3.1
• 反应原生:0.55.2
• 反应导航:1.5.11
• util:0.10.3

Login.js

import React, { Component } from 'react';
import { Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
import styles from "./styles";

export default class Login extends Component {
    constructor(props) {
    super(props);
}

render() {
    const { navigate } = this.props.navigation;     
    return (
        <View style={styles.container}>         
            <View style={styles.formContainer}>                 
                <TouchableOpacity style={styles.button} onPress={()=> navigate('Home')} >
                    <Text style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

Home.js

import React, { Component } from 'react';
import { Text, View } from …

我的React Native代码:

import React, { Component } from 'react';
import { AppRegistry, ActivityIndicator, StyleSheet, ListView, 
  Text, Button, TouchableHighlight, View } from 'react-native';

import { StackNavigator } from 'react-navigation';
import DetailsPage from './src/screens/DetailsPage';

class HomeScreen extends React.Component {

   constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      userDataSource: ds,
    };
  }

  componentDidMount(){
      this.fetchUsers();
  }

    fetchUsers(){

        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response) => response.json())
            .then((response) => {
                this.setState({
                    userDataSource: this.state.userDataSource.cloneWithRows(response)
                });
            });
    }

    onPress(user){
        this.props.navigator.push({
            id: 'DetailPage'
        }); …

目标

使用反应导航,从导航器中的屏幕导航到不同导航器中的屏幕.

更多详情

如果我有以下导航器结构:

• 父导航器
  • 嵌套导航器1
    • 屏幕A.
    • 屏幕B.
  • 嵌套导航器2
    • 屏幕C.
    • 屏幕D.

如何从嵌套导航器2下的屏幕D转到嵌套导航器1下的屏幕A？现在,如果我尝试navigation.navigate从屏幕D屏幕A,将会出现一个错误,表示它不知道屏幕A,只有屏幕C和D.

我知道这已被要求以各种形式在本网站上的各个地方以及GitHub上(https://github.com/react-navigation/react-navigation/issues/983,https://github.com/react-导航/ react-navigation/issues/335#issuecomment-280686611)但是对于那些基本的东西,缺乏明确的答案并滚动浏览数百个GitHub评论搜索解决方案并不是很好.

也许这个问题可以编写如何为每个遇到这个非常常见问题的人做这件事.

我使用DrawerNavigator,我有3页:Router page,mainScreen和photos page,
我maked头导航栏区域,我用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>在mainScreen打开抽屉菜单,并使用提供的照片太过页面,菜单是确定在mainScreen,但是当我点击<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>的照片页面,我收到此错误:
我该如何解决这个问题？

我的照片页面:

import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'

const MyNavScreen = ({ navigation }) => (
  <View>
    <View style={styles.containerNavbar}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
        <Icon name="bars" size={30} color="#fff" />
      </TouchableHighlight>
      <Text style={styles.navbarTitle}>Photos</Text>
    </View>

    <ScrollView>
      <View><Text>photo</Text></View>
      <Button …