标签: react-navigation

我正在尝试在我的详细信息组件中使用我的主要组件中的一个函数，我用户反应导航导航到该函数，并且我想在我的主要组件中保存详细信息屏幕中的一些更改

//主.js

import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
     TextInput,
     ScrollView,
     TouchableOpacity,
     KeyboardAvoidingView,
     AsyncStorage
    } from 'react-native'
import Note from './Note'
import { createStackNavigator, createAppContainer } from "react-navigation";
import Details from './Details';


export default class Main extends React.Component {

  static navigationOptions = {
    title: 'To do list',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };

  constructor(props){
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    };
  }
render() {

    let notes = this.state.noteArray.map((val,key) => {
      return <Note key={key} keyval={key} val={val} …

我正在使用 React Native、Expo 和 React Navigation 创建一个应用程序，但我不知道传递 props 和函数的正确方法。

我已经复制了我将在其上构建的导航器的 Expo 方法，但现在我只有 App.js 调用以下 AppNavigator -> MainSwitchNavigator -> HomeScreen

然后，我使用带有身份验证器的 Amazon AWS Amplify HOC 包装了 Expo 期望的主要导出应用程序。现在我可以使用亚马逊的 Cognito 服务登录到我的应用程序并安全地显示 hello world。

如果我想注销，我可以使用我目前在 App 的道具上使用的注销功能。

class App extends React.Component {

  constructor(props) {
    super(props);
    this.signOut = this.signOut.bind(this);
  }

  signOut() {
    Auth.signOut().then(() => {
      this.props.onStateChange('signedOut', null);
      console.log("signed out");
    }).catch(e => {
      console.log(e);
    });
  }

  render () {
    return (
        <View style={styles.container}>
          <AppNavigator screenProps={{
            signOut: () => {this.signOut}
            }}/>
        </View>
    );
  }
}

export …

我正在制作 react native expo 应用程序，我有一个问题。我有 2 页。在 page1.js 中，我设置了 page2.js 的标题，但我对此有一些问题。我有 TouchableOpacity，在那里我导航到另一个页面，并在那里设置了 createStackNavigator 选项的标题。在 createStackNavigator 选项中，我得到已发送的标题。它给了我错误：警告：道具类型失败：提供给, 预期onPress的类型的道具无效。还有一个：this.props.onPress 不是一个函数booleanTouchableOpacityfunction

我做错了什么？代码：

// page1.js
import React, { Component } from 'react';
import { StyleSheet, View, Button, Image, Text, TouchableOpacity, ScrollView, SafeAreaView, ActivityIndicator } from 'react-native';
import { Header } from 'react-navigation';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

import CoursesPlan from '../components/CoursesPlan'

const title = "a";

setTitle = (data) => {
title = data; …

我想在react-native header中添加按钮，该按钮是为了在页面中mas和unmask密码，当我改变状态以改变secureTextEntry值时点击的问题，图标不会改变将保留为初始值；该功能工作正常，但图标不能改变

this.state.secureTextEntry ? "eye" : "eye-slash"

这是主要代码

 class ChangePasswordScreen extends Component {
 constructor(props) {
     super(props);
     this.state = {
         newPassword: null,
         currentPassword: null,
         confirmPassword: null,
         errors: [],
         secureTextEntry: true

     };

     this.maskPassword = this.maskPassword.bind(this)
 }
 componentDidMount() {
     this.props.navigation.setParams({
         headerRight: ( < TouchableOpacity onPress = {
                 () => {
                     this.maskPassword();
                 }
             } > < Icon style = {
                 styles.eyeIcon
             }
             name = {
                 this.state.secureTextEntry ? "eye" : "eye-slash"
             }
             size = {
                 20
             }
             color = {
                 Colors.WHITE
             }
             /></TouchableOpacity > ) …

我是 React Native 的新手。我想创建简单的抽屉导航，但在这里出现错误。

我已经安装了反应导航。这是代码：

import React, { Component } from 'react';

import {
StyleSheet,
Text,
View,
StatusBar ,
TouchableOpacity
} from 'react-native';

import { DrawerNavigator } from 'react-navigation';

import Screen1 from './Screen1';
import Screen2 from './Screen2'; 

const Drawer= DrawerNavigator({
    Home:{
        screen: Screen1
    },
    Home2:{
        screen: Screen2
    }
})

export default Drawer

我希望屏幕包含抽屉导航器。

但我收到错误：

(0,_reactNavigation.DrawerNavigator) 不是函数

我正在使用React Navigation 5+. 他们改变了您配置导航器的方式，我正在尝试在我的程序中实现它。我有一个DrawerNavigator顶级导航器。第一个屏幕是StackNavigator几个屏幕。我正在寻找一种方法来防止用户在除第一个屏幕之外的每个屏幕上滑动抽屉。这是我的导航器文件：

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function CheckinStack() {
    return (
        <Stack.Navigator
            initialRouteName={"Loading"}
            headerMode={"none"}
        >
            <Stack.Screen 
                name={"Search Locations"} 
                component={SearchLocationsScreen} 
                options={{gestureEnabled: true}}
            />
            <Stack.Screen 
                name={"Check In Form"} 
                component={CheckInFormScreen} 
                options={{gestureEnabled: false}}
            />
            <Stack.Screen 
                name={"Checked In"} 
                component={CheckedInScreen} 
                options={{gestureEnabled: false}}
            />
            <Stack.Screen 
                name={"Business Details"} 
                component={BusinessDetailsScreen} 
                options={{gestureEnabled: false}}
            />
        </Stack.Navigator>
    );
}

function MainDrawer() {
    return (
        <Drawer.Navigator >
            <Drawer.Screen name={"Search Locations"} component={CheckinStack}/>
            <Drawer.Screen name={"About"} component={AboutScreen}/>
            <Drawer.Screen name={"Favorites"} component={FavoritesScreen}/>
            <Drawer.Screen name={"Profile"} component={ProfileScreen}/>
            <Drawer.Screen …

我是 React Native 的新手，我正在尝试创建一些仅用于学习和测试的东西......

现在，我正在尝试创建一个带有登录屏幕和“登录区域”中的其他一些屏幕的应用程序。所以，我想在“记录区域”屏幕上使用标题栏，而不是在登录屏幕上。

为此，我正在尝试使用 React-Navigation，并在Stack.Screen. 但是不工作...

这是我当前的代码：

[...]
const Stack = createStackNavigator();
[...]
<NavigationContainer>
  <Stack.Navigator headerMode="screen">
    <Stack.Screen headerTitle="Test" headerShown={false} screenOptions={{headerTitle: 'Test', headerShown: false}} name="Login" component={Login} />
  </Stack.Navigator>
</NavigationContainer>
[...]

我正在测试headerTitle和是否headerShown作为财产或作为screenOptions' 选项工作......但没有任何效果。

现在，我的屏幕在标题中有一个“登录”标题（忽略headerTitle属性和选项）并显示标题（忽略headerShown属性和选项）。

有人能告诉我我做错了什么吗？

所以我正在开发一个 react-native 应用程序，我正在使用 react-navigation 进行导航，在屏幕选项的 headerTitle 中使用图像可以工作，但是图像被切断了。我试过弄乱图像的高度/宽度，想知道这是否是标题的填充问题，但仍然没有。任何想法为什么？

这是组件

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

function HeaderLogo(props) {
    return(
        <Image style={styles.logoStyles} source={require("../../assets/images/svg/LogoNoTxt.png")}/>
    );
};

const styles = StyleSheet.create({
    logoStyles: {
        height: 40,
        width: 40,
    },
});

export default HeaderLogo

这是堆栈导航器

import React from "react";
import { createStackNavigator } from '@react-navigation/stack';

//Components
import HeaderLogo from "../../components/images/HeaderLogo";

//TopTab
import HomeTopTabNavigator from "../topTab/HomeTopTabNavigator";

//Screens
import AddTasks from "../../screens/home/AddTasks";

//Initialize vars
const Stack = createStackNavigator();

function HomeStackNavigator() {
    return( …

我在将 react-navigation 从 v3 升级到 v5 时遇到了一些麻烦。我一直遇到这个错误，起初我认为这是一个错误，但我没有在网上找到任何其他关于它的投诉。为了 100% 确定旧版本没有引起任何问题，我完全卸载了所有 react-navigation 并从头开始使用 v5。我仍然收到索引文件错误。它似乎不理解打字稿......这是一个已知的错误吗？关于安装 Typescript 的文档中没有我需要采取的另一个步骤吗？

更新：./types 文件没有正确编译...它似乎无法识别 NavigationState 或 ActionHelpers...这是一个错误吗？有没有人见过这个？

更新 2 我在 RN V0.59 上运行，所以我认为可能存在依赖性问题。我正在升级到 V0.62.2，看看问题是否仍然存在

https://reactnavigation.org/docs/getting-started

语法错误：/Users/myusername/myprojectname/node_modules/@react-navigation/stack/src/index.tsx：意外令牌 (51:12)

49 | * 类型 50 | */

51 | 导出类型 { | ^ 52 | 堆栈导航选项，53 | StackNavigationProp, 54 | StackHeaderProps，

我有 React 导航设置来返回我的组件，到目前为止，从我阅读和观看的内容来看，一切似乎都已正确设置，当我通过 expo 加载应用程序时，我得到“Invariant Violation: _default(...): Nothing was从渲染返回。” 我不确定我的导航器本身是否有问题，或者我如何调用我的导航器？不确定它是如何知道在 HomeStack.Navigator 中调用该特定组件的，我认为它需要某种类似的路由来调用以按其名称加载该特定组件？可能丢失了整个文件，不确定。

导航文件

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../Home";

const HomeStack = createStackNavigator();
const HomeStackScreen = () => {
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} />
  </HomeStack.Navigator>;
};

export default () => {
  <NavigationContainer>
    <HomeStackScreen />
  </NavigationContainer>;
};

App.js 文件

import React from "react";
import Navigation from "./config/navigation";

export default () => <Navigation />;

主页组件文件

import React from …