Блог

Главная - Вопросы по программированию - Кнопка заголовка навигации React Native справа не работает

Кнопка заголовка навигации React Native справа не работает

#react-native #react-navigation #react-navigation-stack

#реагировать-родной #react-навигация #реагировать-навигация-стек

Вопрос:

Я разрабатываю мобильное приложение с использованием React Native. Я использую навигацию React, https://reactnavigation.org / для навигации. Но у меня возникла проблема с встраиванием кнопки внутри панели действий, панели инструментов или панели навигации или как вы хотите это назвать. Но это не работает.

 class HomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
    return {
        headerTitle: "This is the title",
        headerRight: (
                <Button
                onPress={() => {

                }}
                title=" 1"
                color="#fff"
                />
            ),
        };
    };

    constructor(props) {
        super(props)
        this.state = {
            active: 'true'
        };
    }

    render() {
        return (
            <Container>
                <View style={{ flex: 1 }}>
                    <Content padder>
                    <Tabs>
                    <Tab heading="Shuffles">
                        <Playlists />
                    </Tab>
                    <Tab heading="Public">
                        <Playlists />
                    </Tab>
                    <Tab heading="My Playlists">
                        <Playlists />
                    </Tab>
                    </Tabs>
                    </Content>
                </View>
            </Container>
        )
    }
}

export default HomeScreen;

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

 static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: "This is the title",
            headerRight: (
                    <Button
                    onPress={() => {

                    }}
                    title=" 1"
                    color="#fff"
                    />
                ),
            };
        };

Но это только изменение заголовка, но не добавление кнопки справа, как вы можете видеть на скриншоте ниже.

введите описание изображения здесь

Почему кнопка не добавлена справа?

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

1. Можете ли вы попробовать с другим цветом? Возможно, она должна быть примерно того же цвета, что и верхняя панель.

2. Я попытался установить красный цвет. Но кнопка по-прежнему не отображается.

3. @WaiYanHein я столкнулся с той же проблемой. Вы уже нашли какое-либо решение?

Ответ №1:

Поздний ответ, но я надеюсь, что это поможет людям, сталкивающимся с этой проблемой в react-navigation v4.

В вашем createBottomTabNavigator (или любом другом, который вы используете) добавьте это

 import { getActiveChildNavigationOptions } from 'react-navigation';

navigationOptions: ({ navigation }) => {
        const { index, routes } = navigation.state;
        const { routeName } = routes[index];

        if (routeName === '<Route name>') {
            return {
                ...getActiveChildNavigationOptions(navigation)
            }
        }

Теперь вы должны иметь возможность настраивать панель навигации из своего компонента

Метки: