Блог

Главная - Вопросы по программированию - Реагирующая навигация — как вложить компонент, обертывающий навигатор стека внутри навигатора вкладок

Реагирующая навигация — как вложить компонент, обертывающий навигатор стека внутри навигатора вкладок

#javascript #react-native #react-navigation

#javascript #react-native #реагировать-навигация

Вопрос:

Я пытаюсь создать навигатор вкладок, где экран настроек / вкладка является компонентом, который, помимо прочего, содержит навигатор стека.

Вот код, который у меня есть в настоящее время (также можно найти в качестве закуски).

 import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';

class ScreenA extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'A',
  };

  render() {
    return (
      <View>
        <Text>Screen A</Text>
      </View>
    );
  }
}

class SettingsHome extends React.Component {
  render() {
    return (
      <Button onPress={() => this.props.navigation.navigate('SettingsScreenA')}>
        <Text>Navigate to Settings A</Text>
      </Button>
    );
  }
}

class SettingsScreenA extends React.Component {
  render() {
    return (
      <View>
        <Text>Settings A</Text>
        <Button onPress={() => this.props.navigation.navigate('SettingsA')}>
          <Text>Back to SettingsHome</Text>
        </Button>
      </View>
    );
  }
}

const SettingsStackNavigator = createStackNavigator({
  SettingsHome: { screen: SettingsHome },
  SettingsScreenA: { screen: SettingsScreenA }
})

class SettingsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Settings',
  }

  render() {
    return (
      <View>
        <Text>Some other components...</Text>
        <SettingsStackNavigator navigation={this.props.navigation}/>
      </View>
    );
  }
}

const RootTabNavigator = createBottomTabNavigator({
  ScreenA: { screen: ScreenA },
  Settings: {screen: SettingsScreen },
});

const Navigation = createAppContainer(RootTabNavigator);

export default class App extends React.Component {
  render() {
    return (
      <Navigation />
    );
  }
}

В настоящее время я получаю ошибку «Ошибка типа: в состоянии навигации не найдено «маршрутов»». Вы пытались передать навигационную поддержку компонента React ‘

Комментарии:

1. Рендеринг SettingsStackNavigator … фактически отображает экран (который находится поверх этого стека)… почему вы хотите иметь StackNavigator другой компонент на одном экране …?

2. Потому что мой клиент хочет другой пользовательский интерфейс для портретного и альбомного режимов, и мне нужно реализовать его таким образом:(

3. Некоторые другие компоненты будут размещены поверх заголовка вашего SettingsStackNavigator … это то, что вы хотите?

4. Да, но я не могу сделать это с помощью строки заголовка навигатора стека

5. Я думаю, что применимым решением здесь является внедрение вашего Some other components в ваш SettingsHome и SettingsScreenA отключить заголовок по умолчанию для вашего StackNavigator .. и вместо этого создать пользовательский, который будет размещен в середине ваших компонентов…

Ответ №1:

вам нужно будет вложить сам компонент в stackNavigator , содержащий все stackScreen , вот так;

 import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';

class ScreenA extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'A',
  };

  render() {
    return (
      <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
        <Text>Screen A</Text>
      </View>
    );
  }
}

class SettingsHome extends React.Component {
  render() {
    return (
      <Button onPress={() => this.props.navigation.navigate('SettingsScreenA')}
        title ="Navigate to Settings A"
      />
    );
  }
}

class SettingsScreenA extends React.Component {
  render() {
    return (
      <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
        <Text>Settings A</Text>
        <Button onPress={() => this.props.navigation.navigate('SettingsHome')}
          title ="Back to SettingsHome"
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
        <Text>Some other components...</Text>
          <Button title="Seting A" onPress={() => this.props.navigation.navigate('SettingsScreenA')} />

      </View>
    );
  }
}

// Create our stack navigator
const SettingsStackNavigator = createStackNavigator({
  SettingsMain: {screen: SettingsScreen,},
  SettingsHome: { screen: SettingsHome },
  SettingsScreenA: { screen: SettingsScreenA }
}, {initialRouteName: 'SettingsMain'})



const RootTabNavigator = createBottomTabNavigator({
  ScreenA: { screen: ScreenA },
  Settings: {screen: SettingsStackNavigator },
});

// And the app container
export default createAppContainer(RootTabNavigator);

надеюсь, это поможет!