Question

我已经使用React native实现了一个标签视图，但是我需要从子屏幕导航到另一个父屏幕。

查看此图片：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>
        );
    }
}

Answer 1

我也遇到了同样的问题，我能够使用

在子标签中获取导航对象

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 Tab View。路线导航在renderScene组件中不起作用

1 个答案: