标签: react-navigation

我是反应原生开发的新手.我想在反应原生中实现带有堆栈导航器的tabbar.Tabbar显示正确.点击设置屏幕"回家"按钮不导航到国家/地区屏幕.它似乎很简单,但因为我是新的我没有太多的想法.

index.ios.js

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

import MNavigator from './Components/MNavigator';

AppRegistry.registerComponent('*****', () => MNavigator);

MNavigator.js

import React, { Component } from 'react';
import {
   Navigator,
 } from 'react-native';

import {
TabNavigator,
} from 'react-navigation';

import { StackNavigator } from 'react-navigation';
import ArticleList from './ArticleList';
import SettingsScreen from './SettingsScreen';

export const MNavigator = TabNavigator({
ArticleList: {screen: ArticleList},
SettingsScreen: {screen: SettingsScreen},

})

export default MNavigator;

SettingsScreen.js

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

我发现各种类似的问题都有不同的问题和解决方案。在大多数情况下，似乎项目架构是罪魁祸首。我无法弄清楚我的。我想导航到Signup screen点击获取 OTP 按钮PhoneSignup screen。

电话注册表格.js

export default class PhoneSignupForm extends Component {    
      render() {
        return (
            <View >
               <TouchableOpacity 
                  onPress={ () => this.props.navigation.navigate('Signup') }
                >
                  <Text>
                    Get OTP
                  </Text>
              </ TouchableOpacity>
            </View>
        );
      }
    }

电话注册.js

import PhoneSignupForm from './PhoneSignupForm';

export default class PhoneSignup extends Component {
  render() {
    return (
        <View style = {styles.container}>
            <View style = {styles.logoContainer}>
                <Image
                    style = {styles.logo}
                    source = {require('../../icons/hp.png') }
                />
                <Text style = {styles.title}>Hewlett-Packard</Text> 
            </View>
            <View style …

NavigationActions支持下面的操作,但是当我们访问辅助函数时,我无法理解每个操作的用法this.props.navigation.

• 导航
• 重启
• 背部
• 在里面

那么我们为什么要进口NavigationActions呢？

提前致谢.

我正在尝试从标题按钮导航，但我不能，因为找不到导航变量。

这是我的代码

export const createRootNavigator = (signedIn = false) => {

return StackNavigator(
  {
    SignedIn: {
      screen: SignedIn,
      navigationOptions: {
        gesturesEnabled: false,
        headerStyle,
        headerTintColor: "white",
        headerTitleStyle,
        headerLeft: null,
        headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
                        onPress={() => navigation.navigate({ routeName: 'Notification'})}>
                        <Icon
                          name="md-notifications-outline"
                          size={26}
                          style={{ color: "white" }}/>
                      </TouchableOpacity>,


      }
    },
    SignedOut: {
      screen: SignedOut,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    Notification: {
      screen: Notification,
      navigationOptions: {
        gesturesEnabled: false
      }
    }
  },
  {
    mode: "modal",
    initialRouteName: signedIn ? "SignedIn" : "SignedOut"
  }
); …

我根本找不到让反应导航工作的方法.我从互联网上复制了工作示例,但它们似乎也没有用.谁能告诉我我做错了什么.

我正在使用节点:8.9.4 react:16.3.0-alpha.1 react-native:0.54.0 react-navigation:^ 1.4.0

//index.js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  TabNavigator,
  StackNavigator
} from 'react-navigation';

import Home from './first';
import Homes from './second';

export default class demoApp extends Component {
  render() {
    return (
      <SimpleNavigation/>
    );
  }
}

export const SimpleNavigation = StackNavigator({
  Home: { 
    screen: Home,
    header: { visible: false },
    navigationOptions: {
      title: 'Home',
      header: null
    },
  },
  Homes: { 
    screen: Homes,
    navigationOptions: …

我正在寻找一种反应导航的方式来调度导航动作，并等待其完全完成后再触发下一步。

就像是：

await dispatch({
  type: 'Navigation/goBackTo',
  routeName: 'Main',
})
dispatch(anotherAction())

目前，我正在使用setTimeout解决方法。

我试图使一个屏幕充当常规StackNavigation对象内的模态。意思是，我希望所有屏幕都充当卡（从侧面渲染），但一个屏幕却充当模态（从底部渲染），但是它只是不起作用，所有屏幕都是从侧面渲染。

码：

export const Modal = StackNavigator({
    ReportPage: {
        screen: ReportContainer
    }
}, {
    headerMode: 'none',
    mode:'modal'
})

export const Main = StackNavigator({
    Feed: {
        screen: Feed
    }, 
    ModalScreen: {
        screen: Modal
    }
}, {
    headerMode: 'none'
})

在Expo React Native应用程序中,执行react-native link后执行时发生以下错误yarn add react-navigation native-base.

添加React Navigation和Native-Base时显示警告

warning “expo > react-native-maps@0.21.0” has incorrect peer dependency “react-native@^0.51 || ^0.52 || ^0.53 || ^0.54”.
warning “expo > react-native-reanimated@1.0.0-alpha.3” has incorrect peer dependency “react@16.0.0-alpha.6”.
warning “expo > react-native-reanimated@1.0.0-alpha.3” has incorrect peer dependency “react-native@^0.44.1”.
warning " > react-native@0.55.4" has incorrect peer dependency “react@16.3.1”.
warning “react-native > eslint-plugin-react-native@3.2.1” has unmet peer dependency “eslint@^3.17.0 || ^4.0.0”.
warning “react-navigation > create-react-context@0.2.2” has unmet peer dependency “prop-types@^15.0.0”.

执行react-native链接时遇到错误

PS C:\Projects\proj> react-native link …

我有一个基于Android的React Native应用，并且正在从屏幕A导航到屏幕B.

屏幕B是具有文本输入并使用更新按钮保存新值的组件。

屏幕B

我正在寻找的是在按下按钮后关闭/结束屏幕B，并且流程如下所示：

屏幕A->屏幕B（完成屏幕并返回）->屏幕A

尽管如此，当我回到屏幕A后在Android设备中按“后退箭头”按钮时，该应用仍会返回屏幕B :(

屏幕A中的渲染方法

  render() {
    return (
      <View style={styles.container}>
        <View styleName="horizontal" style={styles.row}>
          <Text style={styles.captionDarkGray}>
            {this.props.user.name}
          </Text>
          <View style={styles.alignHorizontalRight}>
            <Text
              style={styles.editButton}
              onPress={() =>
                this.props.navigation.navigate("ScreenB", {
                  fieldName: "Name",
                  fieldValue: this.props.user.name
                })
              }
            >
              Edit
            </Text>
          </View>
        </View>
      </View>
    );
  }

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

  dimissScreen() {
    // Finish this Component
  }
  render() {
    const fieldName = this.props.navigation.getParam("fieldName", "NO-ID");
    const fieldValue = this.props.navigation.getParam("fieldValue", "NO-ID");

    return (
      <View …