android 超出部分怎么不隐藏

[Mad-hu]

在ios上 tab超出部分被显示了出来，android上就隐藏了，请问怎么办？

RN 0.48.2 `<TabNavigator tabBarStyle={[ {backgroundColor:'#fff',borderTopWidth:1,borderTopColor:'#e5e5e5',overflow:'visible'}, G_IsiPhoneX?{paddingBottom:30,height:49+34}:{} ]}

{ tabBarItems.map((tabBarItem, i) => { let ViewController = tabBarItem.viewController;

                    return (
                        <TabNavigator.Item
                            key={i}
                            selected={this.state.selectedTab === tabBarItem.title}
                            title ={tabBarItem.title}
                            tabStyle={{overflow:'visible'}}
                            titleStyle={{overflow:'visible'}}
                            selectedTitleStyle={{overflow:'visible'}}
                            renderIcon={()=> {
                                return(
                                    <Image resizeMode={'contain'} style={[styles.img,i==2?styles.positionImg:{}]} source={tabBarItem.renderIcon}/>
                                );
                            }}
                            renderSelectedIcon={()=> {
                                return(
                                    <Image resizeMode={'contain'} style={[styles.img,i==2?styles.positionImg:{},{overflow:'visible'}]} source={tabBarItem.renderSelectedIcon}/>
                                );
                            }}
                            selectedTitleStyle={{color:'#ff641b',backgroundColor:'rgba(0,0,0,0)'}}
                            titleStyle={{backgroundColor:'rgba(0,0,0,0)'}}
                            onPress={()=> {
                                this.setState({
                                    selectedTab:tabBarItem.title
                                })
                            }}
                        >
                            <ViewController {...this.props}/>

                        </TabNavigator.Item>
                    )

                })
            }
        </TabNavigator>

`

[maolubin]

大哥，能把你写的借我参考下吗，谢了

[Mad-hu]

@maolubin 上边的就是全部的代码了 如果说没粘上的 也就是个 绝对定位的样式，

[maolubin]

@Mad-hu 大哥求教育，绝对定位参考下

[Mad-hu]

class TabBarViewController extends React.Component { constructor(props) { super(props); this.state = { selectedTab: tabBarItems[0].title }; }

render(){
    return(
        <TabNavigator
            tabBarStyle={[
                {backgroundColor:'#fff',borderTopWidth:1,borderTopColor:'#e5e5e5'},
                G_IsiPhoneX?{paddingBottom:30,height:49+34}:{height:50}
            ]}
        >
            {
                tabBarItems.map((tabBarItem, i) => {
                    let ViewController = tabBarItem.viewController;

                    return (
                        <TabNavigator.Item
                            key={i}
                            selected={this.state.selectedTab === tabBarItem.title}
                            title ={tabBarItem.title}
                            renderIcon={()=> {
                                return(
                                    <Image resizeMode={'contain'} style={[styles.img,i==2?styles.positionImg:{}]} source={tabBarItem.renderIcon}/>
                                );
                            }}
                            renderSelectedIcon={()=> {
                                return(
                                    <Image resizeMode={'contain'} style={[styles.img,i==2?styles.positionImg:{}]} source={tabBarItem.renderSelectedIcon}/>
                                );
                            }}
                            selectedTitleStyle={{color:'#ff641b',backgroundColor:'rgba(0,0,0,0)'}}
                            titleStyle={{backgroundColor:'rgba(0,0,0,0)'}}
                            onPress={()=> {
                                this.setState({
                                    selectedTab:tabBarItem.title
                                })
                            }}
                        >
                            <ViewController {...this.props}/>
                        </TabNavigator.Item>
                    )

                })
            }
        </TabNavigator>
    );
}

}

const styles = StyleSheet.create({ img:{ width:28, height:28,

},
positionImg:{
    position:'absolute',
    width: Platform.OS == 'android'?45:60,
    height:Platform.OS == 'android'?45:60,
    bottom:Platform.OS == 'android'?-15:-15,
    left:Platform.OS == 'android'?-22.5:-30
}

})

[Mad-hu]

[maolubin]

@Mad-hu 哥谢了

[maolubin]

@Mad-hu 那个安卓隐藏的你解决了吗

[Mad-hu]

没有 你看上图 android上这个中间的活动变小了，跟产品商量了一下 暂时这样了 没法先更好的办法，我尝试更改这个源码 ，可是仍然没有成功。

[maolubin]

@Mad-hu tabBarItems 哥这个数据你是怎么塞进去的，我是初学者

[Mad-hu]

[maolubin]

@Mad-hu 跪谢，有大神就是好

[habovh]

As I commented in https://github.com/happypancake/react-native-tab-navigator/issues/159#issuecomment-345958551, I strongly suggest not to use hard coded screen dimensions to detect iPhone X and provide additional margins. Instead, I made #166 which leverages Apple's Safe Area concept, available since iOS 11, which will allow TabNavigator to work automatically with any other screen layout that Apple may put out there.

[atishoo]

现在这个问题解决了吗，我觉得现在这个需求很大众化了

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.