Вкладка навигации на экране профиля (думаю, страница профиля Instagram)

Question

В React Native, как я могу добавить навигацию по вкладкам в середине экрана?

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

Текущий подход:

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

// set the tab-index on press
selectTab = ( index ) => {
    this.setState({
        activeIndex: index,
    })
}

// render the content for the selected tab
renderTabContent = () => {
    if( this.state.activeIndex == 1 ) {
        return(
            <View>
                <Text>
                    This is the first section
                </Text>
            </View>
        )
    }
    else if( this.state.activeIndex == 2 ) {
        return(
            <View>
                <Text>
                    This is the second section
                </Text>
            </View>
        )
    }
    else if( this.state.activeIndex == 3 ) {
        return(
            <View>
                <Text>
                    This is the third section
                </Text>
            </View>
        )
    }
}

render() {
    return (
        <ScrollView>
            <View style={{ flexDirection: 'row' justifyContent: 'space-around' }}>
                <TouchableOpacity
                    onPress={() =>this.selectTab(1)} 
                    style={[this.state.activeIndex == 1 ? { backgroundColor: 'red', width: 100 } : { backgroundColor: 'gray', width: 100, }]}
                >
                    <Text>#1</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() =>this.selectTab(2)} 
                    style={[this.state.activeIndex == 2 ? { backgroundColor: 'red', width: 100 } : { backgroundColor: 'gray', width: 100, }]}
                >
                    <Text>#2</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() =>this.selectTab(3)} 
                    style={[this.state.activeIndex == 3 ? { backgroundColor: 'red', width: 100 } : { backgroundColor: 'gray', width: 100, }]}
                >
                    <Text>#3</Text>
                </TouchableOpacity>
            </View>
            {this.renderTabContent()}
        </ScrollView>
    )
}

PS: Существуют ли дружественные для начинающих примеры реальных (ish) приложений дляполучить представление о том, как общие шаблоны пользовательского интерфейса реализованы в React Native?

Answer 1

Вы можете использовать createBottomTabNavigator функцию react-navigation библиотеки:

import { createBottomTabNavigator } from 'react-navigation';

И затем создать свой stackNavigator:

export default createBottomTabNavigator({
  Home: { screen: Home},
  Search: { screen: Search},
  History: { screen: History }
});

Вы можете настроить внешний вид и поведение вкладки, выполнив следующие действия.эта ссылка.

https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance

Для полного примера вы можете обратиться:

https://github.com/react-navigation/react-navigation-tabs