Я попробовал React Native Tab View. Навигация по маршруту не работает в компонентах renderScene - PullRequest
Новая
       29

Я попробовал React Native Tab View. Навигация по маршруту не работает в компонентах renderScene

3 голосов
/ 30 октября 2019

Я реализовал представление вкладок с помощью React native, но мне нужно перейти с дочернего экрана на другой родительский экран.

См. Это изображение: Мой пользовательский интерфейс

На изображении выше, когда я нажимаю кнопку Далее, я могу перемещаться между вкладками, но мне нужно перейти к другому основному виду. Как я могу это сделать?

Найдите следующий код:

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>
        );
    }
}
...