Как создать панель навигации по вкладкам в React Native? - PullRequest
Новая
       1

Как создать панель навигации по вкладкам в React Native?

1 голос
/ 11 марта 2019

Я хотел бы создать панель вкладок, подобную той, что в Твиттере, показанной также в этом вопросе здесь, но я не хочу, чтобы она была вверху или внизу экрана. В моем приложении должен быть заголовок с определенным стилем, некоторой информацией и только после панели вкладок. Я пытаюсь реализовать это с помощью React-Natigation, но кажется, что по умолчанию вы можете создавать панели вкладок только вверху или внизу экрана.

До сих пор я создал пример кода для панели вкладок: 

import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createMaterialTopTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

export default createAppContainer(TabNavigator);

А вот код экрана, на котором я хочу, чтобы появилась эта панель вкладок: 

import React from 'react';
import { Text, View } from 'react-native';
import { TabNavigator } from './../MyTab.js'

class App extends React.Component {
  render() {
    return (
      <View>
        <Text style={...some style...}>Title</Text>
        <Text>Some text</Text>
        <TabNavigator />
      </View>
    );
  }
}

export default App;

Но этот код завершается ошибкой:

Устройство: (101: 380) Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.

Есть ли у вас предложения по внедрению подобной панели вкладок? Мне даже не нужна настоящая панель навигации, потому что она предназначена для фильтрации некоторых данных, поэтому каждый раз, когда я нажимаю на вкладку, я просто хочу вызвать функцию, как это происходит для элементов, которые имеют функцию onPress, например кнопки .

1 Ответ

1 голос
/ 12 марта 2019

Вы можете вкладывать вкладку в StackNavigator. 

import React from 'react';
import { View, Text } from 'react-native';
import { 
    createStackNavigator, 
    createAppContainer, 
    createMaterialTopTabNavigator } 
    from 'react-navigation';


class StackScreen extends React.Component{
 render(){
  return(
    <View>
     <Text>Title</Text>
     <Text>Some text</Text>
   </View>
   )
 }
}


const TabNavi = createMaterialTopTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});


const StackNavi = create StackNavigator({
  Main: {screen: TabNavi,
   navigationOptions: ({navigation}) => ({
      header: <StackScreen navigation= {navigation} />,
    })
  },
});

export default createAppContainer(StackNavi);

Надеюсь, что поможет

...