react-navigation top无法显示问题

记录一次使用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.propsreturn (<View><Text>{
    tabLabel}</Text></View>)}
}

描述二

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

解决方法

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

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