Ошибка навигации React в React Native

Я хочу использовать представление навигации и другое представление на одной странице. Как я могу это сделать?

Этот код работает успешно

const MyNav = TabNavigator({
  News: { screen: NewsScreen },
  Videos: { screen: VideosScreen },
  Bands: { screen: BandsScreen },
  Jokes: { screen: JokesScreen },
}, {
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});


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

Но когда я пытаюсь таким образом, он возвращает ошибку

export default class App extends Component<{}> {
  render() {
    return(
    	<View>
    		<MyNav/>
        <View>
          //Something i want
        </View>
    	</View>
    );
  }
}

Как я могу это решить? Экран эмулятора Android при ошибке


react-native react-navigation tabnavigator
person Community    schedule 14.01.2018    source источник

Ответы (4)


arrow_upward
0
arrow_downward

React Native не поддерживает множественные переходы по умолчанию. Вам нужно будет сделать это несколько вручную. Подробнее здесь: React Native: несколько панелей навигации Navigator

Также обратите внимание на ошибку здесь:

    <View>
      //Something i want
    </View>

Когда вы находитесь внутри метода render, это не код JS, а JSX. Таким образом, вы не можете писать комментарии с //, как обычно. Правильный синтаксис {/* Comments */}.

person Artem Novikov    schedule 14.01.2018

arrow_upward
0
arrow_downward

Просто оберните другое представление или любой другой элемент внутри одного родительского представления. Вы можете вернуть только одно представление. Что-то вроде этого

export default class App extends Component<{}> {
  render() {
    return(
    	<View>
            <View>
    		    <MyNav/>
            </View>
            <View>
               //Something
            </View>            
    	</View>
    );
  }
}

person Arun kumar    schedule 15.01.2018

arrow_upward
0
arrow_downward

Если вы хотите вернуть несколько View в render(), вы должны сгруппировать их по массиву.

Нравиться,

return (
 [
  <View key="1">
    <Something/>
  </View>,

  <View key="2">
    <Something/>
  </View>
 ]

);

person Bright Lee    schedule 15.01.2018

arrow_upward
0
arrow_downward

Выполните следующие шаги

Первая импортная реагирующая навигация. Второй навигатор createStack, а затем контейнер, например createAppContainer.

import { createStackNavigator, createAppContainer } from 'react-navigation';


const App = createStackNavigator({
    GetStartedPage: { screen: GetStartedController }, 
    LoginPage: { screen: LoginController }, 

  },
  {
    initialRouteName: 'GetStartedPage',
  },
);

export default createAppContainer(App);
person Muhammad Saqib Javed    schedule 07.01.2020
comment
не могли бы вы объяснить, где ваши шаги? - person Milan Desai; 07.01.2020
comment
сначала импортируйте реагирующую навигацию и следуйте приведенным ниже процедурам. - person Muhammad Saqib Javed; 07.01.2020