Question

我正在尝试设置ListView-esque列表，并使每个列表项在可垂直滚动的ListView中水平滚动。我发现ListView永远不会在这个用例中工作，所以我现在使用嵌套的ScrollViews，它有更多的控制权。除了某些样式之外，父ScrollView没有任何道具或设置，每个列表项都有大量约束。

我使用此作为我的列表项代码：

<View style={styles.row}>
    <AnimatedScrollView 
      ref={'animatedSwiperRow'}
      horizontal={true}
      automaticallyAdjustContentInsets={false}
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false}
      keyboardDismissMode={'on-drag'}
      scrollEnabled={this.state.scrollEnabled}
      directionalLockEnabled={true}
      style={[{flex: 1, height: 85}, {backgroundColor: bgColor}]}
      onScroll={this._animateScroll.bind(this)}
      scrollEventThrottle={15}
      onMomentumScrollBegin={this.takeAction.bind(this)}>

      <TouchableOpacity onPress={this._handleViewListItem.bind(this)}>

        <View style={styles.contentRow}>
          <Image
            style={styles.traitIcon}
            resizeMode={'contain'}
            source={{uri: this.props.logo_url}} />

          <View style={styles.contentColumn}>
            <Text style={styles.trait}>
              {this.props.effect}
            </Text>

            <Text style={styles.short_summary}>{this.props.short_summary}</Text>
          </View>

          <Image
            style={styles.profileTypeIcon}
            resizeMode={'contain'}
            source={{uri: this.props.logo_url}} />
        </View>

      </TouchableOpacity>

    </AnimatedScrollView>
  </View>

我的ListView-esque ScrollView是这样的：

  <View style={styles.container}>
    <ScrollView style={styles.outerScroll}>
      {this.state.dataSource.map(this.renderListItem, this)}
    </ScrollView>
  </View>

this.renderListItem是一个简单构建ListItem obj的函数。因此，每个代码块都处于独立的渲染函数中。

我想要完成的是本教程here，它给了我麻烦。到目前为止，我有一个不错的模型，但有很多严重错误。我试图摆脱的第一个错误是每个列表项的ScrollView都能够垂直滚动，这是一个问题，因为我希望所有垂直滚动发送到父ScrollView，它现在作为我的ListView。所有水平滚动我只需要水平滑动行。显然现在情况并非如此，因为大多数垂直滚动只滚动单个列表项而不是我想要的整个列表。

React Native，嵌套滚动视图，交叉定向滚动

0 个答案: