react-navigation top无法显示问题

最新推荐文章于 2023-04-16 04:29:04 发布

chen_晨风

最新推荐文章于 2023-04-16 04:29:04 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

分类专栏： # React-native

本文链接：https://blog.youkuaiyun.com/qq_37674616/article/details/88309622

React-native 专栏收录该内容

6 篇文章

订阅专栏

本文记录了一次React-navigation在使用过程中遇到的导航显示问题，包括无法点击切换和完全不显示的情况。问题出现在可能使用ScrollView包裹导致。解决方案是避免使用ScrollView，改用View，并且在View中不需要设置flex: 1。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一次使用React-navigation中遇到的问题。

问题

1.描述：导航显示了但不能点击切换
2. 描述: 导航无法在界面中显示

案发现场

描述一
可能采用了 ScrollView来包裹导致。案例现场

const tabNames:string[]=['Tab1','Tab2','Tab3']
export default class Playground extends Component<NavigationScreenProps> {
  static navigationOptions={
    title:null
  }
  _getTabs(){
    const tabs:any={};
    tabNames.forEach((item,index)=>{
        tabs[`tab${index}`]={
          screen:(props:any)=><CommonTab {...props} tabLabel={item}/>,
          navigationOptions:{
              title:item
          }
        }
    });
    return tabs;
  }
  render() {
    const TabNavigator =createAppContainer(createMaterialTopTabNavigator(this._getTabs(),{
      tabBarOptions:{
        activeTintColor:'red',
        inactiveTintColor:'gray',
        style:{
          backgroundColor:'white'
        }
      },
    }));
    return (
   			 //案发现场
      <ScrollView style={{flex:1,marginTop:100,}}>
        {TabNavigator && <TabNavigator />}
      </ScrollView>
    )
  }
}
class CommonTab extends Component<any> {
  render() {
    const {tabLabel}=this.props
    return (
      <View>
        <Text>{tabLabel}</Text>
      </View>
    )
  }
}

描述二

...//和上文一样
		 //案发现场
   <View>
     {TabNavigator && <TabNavigator />}
   </View>

解决方法

不能使用scrollView,使用View时，则不需加flex：1

<View style={{flex:1}}></View>