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

    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平台上发生。

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模拟器中为我呈现这样的内容：

它可以在一个视图中渲染Tabs，它们是＆＃34; Stacked＆＃34;彼此重叠，但是你的标签不能正常运行会留下一个大问题。考虑一下：

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

现在父屏幕正在尝试渲染两个不同的标签＆＃34;活动＆＃34;屏幕，因为每个TabNavigators都有一个＆＃34;活跃的＆＃34; tab。这会在渲染中导致不可预测的问题。

相反，您可能最好创建一个视图，它在视图的底部有自己的自定义TabBar。否则，您需要找到一种方法来停用＆＃34;停用＆＃34; ＆＃34;活跃＆＃34;选项卡上的＆＃34;无效＆＃34;的TabBar。

希望这有帮助。

嵌套的TabNavigator没有渲染？

1 个答案: