Question

React Native 从函数导航到屏幕

2018-03-26

7377

android reactjs react-native react-navigation

我正在尝试使用React Navigation在屏幕上移动，问题在于我用来动态渲染一组项目的嵌套返回，并且不允许我使用箭头功能直接导航，因此我必须在功能上实现此功能。我的问题是，我该怎么做？就我的互联网研究而言，您只能在对话框警报出现后才推开一个新屏幕，我不想要。

我正在附加代码：

837366790

Answer 1

您可以在此处使用 Stack Navigator，它非常容易从一个屏幕导航到另一个屏幕，并且功能也是如此... 首先。安装库：-

npm install --save react-navigation

然后通过使用导入在您的类中使用它：-

import {StackNavigator} from 'react-navigation';

导出该类

export default Project = StackNavigator(
{

  xyz: { screen: xyz },
});

之后使用函数导航：-

onNextPress=()=>
{
  this.props.navigation.navigate('xyz');
}

希望它能帮助您。谢谢！

Answer 2

我在定义 RootStack 时没有传递导航属性：

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

import createStore from './../../Redux/store';
import {StackNavigator} from 'react-navigation';
import { Provider } from 'react-redux';

import MainView from '../Main/Main';
import MainSecondLvlView from '../Main/MainSecondLvl';
import BalanceView from './../Charts/BalanceView'
import MenuView from './Menu'

const store = createStore();

const RootStack = StackNavigator({
    Main: { screen: MainView },
    MainSecondLvl: { screen: MainSecondLvlView},
    Menu:{ screen: MenuView }
},
{
    initialRouteName: 'Main',
    headerMode: 'none', 
});

export default class App extends Component {

    render(){
        return(
            <Provider store={store}>
                <RootStack navigation={this.props.navigation}/>
            </Provider>
            );
    }
}