javascript - 嵌套 TabNavigator 未渲染？

Question

我在 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 的类似屏幕。这是我的简单 child 场景。

    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);

我将一个容器与我的存储连接起来，并将状态树的操作和状态作为属性传递给每个堆栈子项。我什至可以获得这些属性(property)。但在这里，当我的状态更改时，我首先遇到两个问题，然后属性发生更改，我将其传递给所有堆栈子项，但它不会导致我的组件重新渲染和

最初我可以看到我的子选项卡。但其中的内容不会被渲染。一旦我从 Tabs1 切换到 Tabs2，所有内容都会变得可见。为什么会发生这种情况？

我还发现这在ios中不会发生，而只会在android平台上发生。

Answer 1

当我运行您提供的代码(在 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 模拟器中，它的渲染效果如下:

它可以在一个 View 中呈现所有选项卡，其中它们“堆叠”在彼此之上，但是您将面临一个大问题，因为您的选项卡将无法正确运行。考虑一下:

1. 您单击 Tab1.A，将其激活，然后
2. 单击 Tab2.A 将其激活，

现在父屏幕正在尝试渲染两个不同的选项卡“事件”屏幕，因为每个 TabNavigators 都有一个“事件”选项卡。这将在渲染中给您带来不可预测的问题。

相反，您可能最好创建一个 View ，该 View 在 View 底部有您自己的自定义 TabBar。否则，您将需要找到一种方法来“停用”“非事件”选项卡栏上的“事件”选项卡。

希望这有帮助。