javascript - 嵌套的TabNavigator无法渲染？

我在StackNavigator（祖父母导航器）中的另一个TabNavigator（父导航器）中使用了TabNavigator（子导航器）。

这是我的代码。

    const SimpleApp = StackNavigator({
      Home: { screen: GParentScene, navigationOptions:{title:'MyChats', header:{visible: false}} },
    });

    const GParentScene = TabNavigator({
      A: { screen: ParentScene1 },
      B: { screen: ParentScene2 },
    });
    const ParentScene1 = TabNavigator ({
      Tab1: {screen: ChildScene1},
      Tab2: {screen: ChildScene2}
    });

和ParentScene2的类似屏幕。这是我简单的儿童场景。

    class ChildScene1 extends React.Component {
      render(){
        return(
          <View>
             <Text> this is content of Tab1 </Text>
          </View>
        )
      }
    }

    class ChildScene2 extends React.Component {
      render(){
        return(
          <View>
             <Text> this is content of Tab2 </Text>
          </View>
        )
      }
    }

现在我做了一个容器

    class AppContainer extends Component {
      render() {
        return (
          <SimpleApp screenProps={this.props}/>
        )
      }
    }
    function matchDispatchToProps(dispatch){
      return bindActionCreators(ActionCreators, dispatch)
    }

    function mapStateToProps(state){
      console.log('state tree',state)
      return{
        Count: state.Count,
      }
    }

并将其与提供商中的redux存储连接

    const App = () => (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    );


    AppRegistry.registerComponent('reduxnav', () => App);

我将一个容器与我的商店连接起来，并将操作和状态树状态作为属性传递给每个堆栈子级。我什至可以得到这些财产。
但是这里我遇到两个问题，首先是当我的状态改变时，然后是属性更改，这是我传递给所有堆栈子级的，但这不会导致我的组件重新渲染，并且

最初，我可以看到我的孩子标签。但是其中的内容不会被渲染。一旦我从Tabs1切换到Tabs2，所有内容都将可见。
为什么会这样呢？


我还发现这不是在ios中发生，而是仅在android平台中发生。

最佳答案

当我运行您提供的代码（在React Native版本0.42.3上）时，仅将其修改为添加ParentScene1，并且修改了文本标签：

class ChildScene1 extends React.Component {
  render(){
    return(
      <View>
         <Text> this is content of Child Tab1 </Text>
      </View>
    )
  }
}

class ChildScene2 extends React.Component {
  render(){
    return(
      <View>
         <Text> this is content of Child Tab2 </Text>
      </View>
    )
  }
}

class ChildScene3 extends React.Component {
  render(){
    return(
      <View>
         <Text> this is content of Child Tab3 </Text>
      </View>
    )
  }
}

class ChildScene4 extends React.Component {
  render(){
    return(
      <View>
         <Text> this is content of Child Tab4 </Text>
      </View>
    )
  }
}

const ParentScene1 = TabNavigator ({
    Tab1: { screen: ChildScene1 },
    Tab2: { screen: ChildScene2 }
});

const ParentScene2 = TabNavigator ({
    Tab1: { screen: ChildScene3 },
    Tab2: { screen: ChildScene4 }
});

const GParentScene = TabNavigator({
  A: { screen: ParentScene1 },
  B: { screen: ParentScene2 },
});



const SimpleApp = StackNavigator({
  Home: { screen: GParentScene, navigationOptions:{ title:'MyChats', header:{ visible:false } } },
});

export default SimpleApp;

在iOS模拟器中为我呈现了以下内容：



它可以使所有选项卡呈现在一个视图中，并且这些选项卡彼此“堆叠”，但是您将面临一个大问题，即选项卡无法正常运行。考虑一下：


您单击Tab1.A，使其处于活动状态，然后
单击Tab2.A使其处于活动状态，


现在，“父屏幕”正尝试呈现两个不同的“活动”选项卡屏幕，因为每个TabNavigator都有一个“活动”选项卡。这将在呈现过程中给您带来无法预料的问题。

相反，您最好创建一个视图，该视图在视图底部具有自己的自定义TabBar。否则，您将需要找到一种方法来“停用”“非活动” TabBar上的“活动”选项卡。

希望这可以帮助。