Question

React-Native初学者在这里。我正在努力使StackNavigation与React-Native中的TabNavigation一起使用。我的应用中有三个屏幕。 http_access allow all cache deny all # Squid normally listens to port 3128 http_port 3128和FirstScreen显示为标签，点击SecondScreen中的“点击此处”按钮时会显示PopScreen。 FirstScreen调用按钮单击似乎已失败且没有任何错误，但它返回this.props.navigation.navigate("Pop")。

这是我的代码：

false

import React from "react"; import { View, Text, Button } from "react-native"; import { StackNavigator } from 'react-navigation'; import { TabNavigator, NavigationStackScreenOptions } from 'react-navigation'; class FirstScreen extends React.Component<any, any> { render() { return ( <View> <Text>My First Tab Screen!!!</Text> <Button title="Click Here" onPress={ () => this.props.navigation.navigate("Pop"); } /> </View> ); } } class SecondScreen extends React.Component<any, any> { render() { return ( <Text>My Second Tab Screen</Text> ); } } class PopScreen extends React.Component<any, any> { render() { return ( <View> <Text>Content in pop up.</Text> </View> ); } } const TabOptions = TabNavigator({ MyFirst: { screen : FirstScreen }, MySecond: { screen : SecondScreen } }); class TabOptionsScreen extends React.Component<any, any> { static navigationOptions : NavigationStackScreenOptions = { header: null }; render() { return ( <TabOptions /> ) } } export const App = StackNavigator ({ Home : { screen: TabOptionsScreen }, Pop: { screen: PopScreen } })对象在this.props.navigation类中不为null或未定义，但不知何故它无法识别StackNavigator中传递的选项。请帮助我如何在TabNavigator的任何子屏幕中使FirstScreen方法工作？

Answer 1

在几次读取之后，我意识到this.props.navigator对于使用它的导航器是独占的。 TabNavigator中的navigator可用于在选项卡之间切换，而StackNavigator中的navigator可以将屏幕推入或从屏幕堆栈中弹出。导航器中的屏幕确实从父级继承navigator对象，但它们不会在屏幕层次结构中向下传递。所以有两种解决方案：

第一个解决方案几乎与Guilherme建议的相同，但是我在TabNavigator中传递了navigationOptions，而是在StackNavigator中传递了相关的屏幕。

const TabOptions = TabNavigator({
    MyFirst: { screen : FirstScreen },
    MySecond: { screen : SecondScreen }
});
// TabOptionsScreen class removed here. 
// TabOptions constant is directly passed in StackNavigator.
export const App = StackNavigator ({
    Home : {  
       screen: TabOptions,
       navigationOptions : {
            header: null
        }
    },
    Pop: { screen: PopScreen }
})

现在我可以在FirstScreen组件中使用this.props.navigation.navigate("Pop")。它还允许我们导航到同一级别的其他标签 - this.props.navigation.navigate("MySecond")。

在我的原始代码中，我将所有屏幕都写在单独的文件中，并且我希望将屏幕的navigationOptions保留在自己的类定义中。所以第二个解决方案就是采用这种模

export class FirstScreen extends React.Component<any, any> {
    render() {
        const { navigate } = this.props.screenProps.navigation;
        return (
            <View>
                <Text>My First Tab Screen!!!</Text>
                <Button 
                    title="Click Here !!!"
                    onPress={ () => navigate("Pop") }/>
            </View>
        );
    }
}

const TabOptions = TabNavigator({
    MyFirst: { screen : FirstScreen },
    MySecond: { screen : SecondScreen }
});

export class TabOptionsScreen extends React.Component<any, any>
{
    static navigationOptions : NavigationStackScreenOptions = {
        header: null,
    };

    render() {
        return ( <TabOptions screenProps={{ navigation: this.props.navigation }} /> )
    }
}

export const App = StackNavigator ({
   Home : {  screen: TabOptionsScreen },
   Pop: { screen: PopScreen }
})

在此代码中，TabOptionsScreen是StackNavigator的直接子项，因此navigation对象也传递给它，但现在我们必须手动传递navigation个对象TabOptions导航器。 screenProps可用于将道具从父组件传递到子组件。在FirstScreen中，使用this.props.screenProps.navigation进行堆栈导航，使用this.props.navigation进行标签导航。

react-navigation无法显示StackNavigator中添加的屏幕

1 个答案: