react-native - 我尝试了 React Native Tab View。路由导航在 renderScene 组件中不起作用

标签 react-native navigation tabview

我已经使用 React native 实现了一个选项卡 View ,但我需要从子屏幕导航到另一个父屏幕。

查看此图片:My UI

在上图中,当我单击下一步按钮时,我可以在选项卡之间导航,但我需要导航到另一个主视图。我该怎么做?

找到下面的代码:

MainScreen.js

class MainTabView extends Component {
    state ={
      index: 0,
      routes: [
          { key: 'offers', title: 'Offers'},
          { key: 'ternding', title: 'Trending'},
          { key: 'retails', title: 'Retails'}
      ]
    }
    
    _updateRoute(newIdx) {
        this.setState({index: newIdx})
        }

    render() {
        return(
            <View style={styles.scene}>
                <Button title={'Main'} onPress={() => { this.props.navigation.navigate('Splash')}}></Button>
                 <TabView
                    navigationState={this.state}
                    renderScene={SceneMap({
                        offers: Offers,
                        ternding: Retails,
                        retails: Trending,
                    })}
                    onIndexChange={index => this.setState({ index })}
                    initialLayout={{ width: Dimensions.get('window').width }}
                    indicatorStyle={{ backgroundColor: 'pink' }}
                    useNativeDriver
                />  
            </View>
        )
    }
}

Offers.js

class Offers extends Component {

    state = {
        title: 'Next Screen'
    }
    componentDidMount() {

    }
    render() {
        return (
            <View style={styles.background}>
                <Button title={'Next'} onPress={() => {
                    this.props.navigation.navigate('Splash')
                }}></Button>
            </View>
        );
    }
}

最佳答案

我遇到了同样的问题,我能够使用以下方法在子选项卡中获取导航对象

import { withNavigation } from 'react-navigation';

https://reactnavigation.org/docs/en/with-navigation.html 引用自本期https://github.com/react-native-community/react-native-tab-view/issues/907

关于react-native - 我尝试了 React Native Tab View。路由导航在 renderScene 组件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58627867/

相关文章:

android - Android 上的选项卡 View 中不显示任何内容

reactjs - 按下按钮 : Hide keyboard in react-native

ios - 我的 React Native 项目不包含 iOS 中的任何 app.xcworkspace 文件

ios - 如何更改 React Native 光标颜色?

css - 导航栏上的强制线(无序列表)?

swiftui - 快速导航栏,在特定选项卡 View 项目上带有工具栏按钮

SwiftUI TabView 覆盖内容 View

ios - 如何使用 docker 构建 react native iOS 应用程序?

jquery - 如何向此响应式菜单添加子菜单?

javascript - 带有面板导航的 jQuery Mobile 多页面结构