1

我在 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 平台中发生的。

4

1 回答 1

0

当我运行您提供的代码（在 React Native 版本上0.42.3）时，该代码仅被修改为 add 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 模拟器中为我呈现这样的效果：

在此处输入图像描述

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

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

现在父屏幕正在尝试渲染两个不同的选项卡“活动”屏幕，因为您的每个选项卡导航器都有一个“活动”选项卡。这会给您的渲染带来不可预知的问题。

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

希望这可以帮助。

于 2017-03-25T08:40:05.093 回答