Блог

Главная - Вопросы по программированию - Как создать нижнюю панель вкладок с помощью компонентов React Navigation и Class?

Как создать нижнюю панель вкладок с помощью компонентов React Navigation и Class?

#react-native #react-navigation #react-navigation-bottom-tab

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

Вопрос:

Я видел много примеров, показывающих, как это работает с функциональными компонентами, но вопрос в том, как мне сделать это с классами? Я не нашел ни одного примера!

Вот как это работает с функциями: Snack

Мне действительно нужна помощь в этом, пожалуйста!

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

1. Вы просто используете обычный синтаксис класса react ( reactjs.org/docs/components-and-props.html ). Единственное, что отличается, это то, как вы ссылаетесь на реквизиты с this.props.navigation , например.

2. Кстати, есть ли какая-то особая причина, по которой вы считаете, что вам нужно использовать компоненты на основе классов? Функциональные компоненты действительно хорошо работают с навигацией react, в частности, потому что библиотека предоставляет множество пользовательских подключений, которыми вы могли бы воспользоваться.

3. Итак, обычно вы делаете это с помощью useEffect крючка reactjs.org/docs/hooks-effect.html . Вы можете использовать этот хук, например, для выполнения некоторого кода после установки компонента (например, выборки или запроса в firestore в вашем случае). Вот форк, который показывает пример snack.expo.io/@bvdl /… .

4. Также не имеет значения, что у вас уже есть много компонентов, которые используют классы, потому что компоненты класса все еще могут обмениваться данными с функциональными компонентами и наоборот (через реквизиты, контекст react и т. Д.). Поэтому совершенно нормально использовать оба в одном приложении.

5. Да, так что для этого вы можете использовать useState хук в сочетании с useEffect . Я обновил свой snack, чтобы показать пример snack.expo.io/@bvdl /… . Итак, вы выполняете какую-то операцию в useEffect , вы получаете что-то обратно, на основе того, что вы получаете обратно, вы обновляете состояние. Я настоятельно рекомендую вам прочитать документацию по hooks, поскольку она содержит более подробную информацию, чем я могу сделать здесь в комментариях reactjs.org/docs/hooks-intro.html .

Ответ №1:

Я рад сообщить вам, что начиная с react-navigation 6, это вполне возможно с компонентами класса!

 yarn add @react-navigation/bottom-tabs
  
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

class MainPage extends React.Component<any, any> {

    render() {
        return (
            <Tab.Navigator>
                <Tab.Screen name="Home" component={HomeScreen} />
                <Tab.Screen name="Settings" component={SettingsScreen} />
            </Tab.Navigator>
        );
    }
}