Question

我正在使用React Native Web和Reactjs，我的一个页面上有以下代码。

我尝试做的是让背景图片和页脚可滚动，同时保持标题（HorizontalNavBar）固定在顶部。当我不尝试在其上渲染VerticalNavBar时，ScrollView工作正常，但在我尝试这样做时会中断。如果VerticalNavBar存在但渲染为空，它甚至不起作用。

非常感谢任何帮助。附上截图。 THX！

  var Home = React.createClass({
      getInitialState: function() {
          return {
              source: homeImageSmall,
              windowWidth: window.innerWidth,
              tutorialDirection: 'row',
              verticalNavOpen: false};
      },

      closeVerticalNav: function() {
         this.setState({verticalNavOpen: false})
      },
      openVerticalNav: function() {
          this.setState({verticalNavOpen: true})
      },
      render() {
          return (
              <View>
                <View style={{flex:0}}>
                    <HorizontalNavBar verticalNavOpen = {this.state.verticalNavOpen} openVerticalNav = {this.openVerticalNav}/>
                    <ScrollView style={{flex:0}}>
                        <View>
                            <Image
                                style={contentStyle.backGroundImage}
                                source={this.state.source}>
                                    <View style = {[styles.doubleIphoneWrapper, {flexDirection: this.state.tutorialDirection}]}>
                                        <Tutorial content={Baseball} name={"Baseball"}/>
                                        <Tutorial content={Football} name={"Football"}/>
                                    </View>
                            </Image>
                            <Footer/>
                        </View>
                    </ScrollView>
                    <VerticalNav verticalNavOpen = {this.state.verticalNavOpen} closeVerticalNav = {this.closeVerticalNav}/>
                </View>
              </View>
    )
    }
    })

Answer 1

原来我有溢出：隐藏在我的HTML文件中。如果我删除它并将水平菜单和垂直菜单的位置设置为“固定”，则上述代码有效。 #facepalm

在React / js中添加相邻组件时ScrollView中断

1 个答案: