React-Navigation的嵌套stackNavigator导航组件被覆盖

Question

我在写Android平台的，用react-navigator，发现一直有问题。
我想在tabNavigator导航里面嵌套一个StackNavigator导航，但是StackNavigator的一直显示不出来，一开始我怀疑是配置出问题，于是单独写了个StackNavigator的例子，发现是没问题的。

外层tab导航

里层的stack导航，里面可以点击跳转。

但是我将stack导航放入tab导航作为一部分，却显示不正常

<Search />
<Category/>    //stack导航组件

异常：stack组件背景不同，（上面的组件也没有设置背景色）

再在下面加一个其他组件，就覆盖了stack组件

<Search />
<Category/>
<Recommend />  //推荐组件

效果：

再如果用ScrollView标签包裹，就看不到stack组件了

<ScrollView style={{flex:1}}>
    <Search />
    <Category/>
</ScrollView>

效果：

下面是stack组件：

class Category extends Component {
  constructor(props) {
    super(props)
    this._onPressButton = this._onPressButton.bind(this)
    this.state = {
    }
  }
  _onPressButton() {
    const { navigate } = this.props.navigation;
    navigate('List', {
      name: `名字列表`
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text1}>分类</Text>
        <View style={styles.row}>
          <TouchableOpacity onPress={this._onPressButton}>
            <View style={styles.item}><Text>互联网</Text></View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._onPressButton}>
            <View style={styles.item}><Text>散文</Text></View>
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <View style={styles.item}><Text>管理</Text></View>
          <View style={styles.item}><Text>内容</Text></View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    marginLeft: 10,
    marginRight: 10,
  },
  text1: {
    color: '#5e5e5e',
    marginBottom: 5,
    fontSize: 14
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10
  },
  item: {
    height: 51,
    width: (Util.size.width - 30) / 2,
    // flex: 1,
    borderColor: '#f1f1f1',
    borderWidth: 1, //Util.pixel
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5
  }
})
const Navigator = StackNavigator({
  Category: {
    screen: Category,
    path: 'Category',
    navigationOptions: {
      headerTitle: '这是Category',
    },
  },
  List: {
    screen: List,
    path: 'List',
    navigationOptions: {
      headerTitle: '这是list',
      headerTitleStyle:{
      }
    },

  },
}, {
    navigationOptions: {
      headerBackTitle: null,
      headerTintColor: '#333333',
      showIcon: true,
      swipeEnabled: false,
      animationEnabled: false,
    },
    mode: 'card',
  });
export default Navigator

求大佬帮我看一下。

Answer 1

弄好了，原来是嵌套关系不对，stackNavigator要作为一个单独组件放在tabNavigator，而不能使普通组件内嵌套stackNavigator