Question

在React Native中，如何在屏幕中间添加标签导航？

到目前为止，我已经有了一个堆栈导航器来管理应用程序的整体导航。据我了解，react-navigation具有默认的选项卡组件，但是该组件似乎位于屏幕的底部，而不是此处所需的中间。考虑到我已经有了堆栈导航器，我也不清楚如何集成它。

当前方法：

手动进行如下操作。是否有使用反应导航自动处理点击效果和幻灯片动画的更好方法？

// 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：有没有适合现实世界的应用程序的初学者示例，以了解如何在React Native中实现常见的UI模式？

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

个人资料屏幕上的标签导航（请考虑Instagram个人资料页面）

1 个答案: