web-dev-qa-db-ja.com

React Native TouchableがScrollViewを無効にしています

私はReact Nativeを初めて使うので、おそらく非常に明白なことを求めていますが、助けてください。

タッチ可能な部分でビューをラップしているので、領域全体がタップに反応します。次に、ScrollViewをビュー内にネストします。全体的な構造は次のようなものです。

<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

これをコンパイルして実行すると、タッピングが検出されますが、スクロールビューはまったくスクロールしません。上記のコードを短くてシンプルにしましたが、各コンポーネントには適切なスタイルがあり、すべてがうまくレンダリングされ、長いテキストがScrollViewの下部で途切れています。助けてください。

ありがとうございました！

scrollviewreact-native
35
Wonil Suh
I'm using this structure it's working for me:

<TouchableWithoutFeedback onPress={() => {}}>
    {other content}   
    <View onStartShouldSetResponder={() => true}>
        <ScrollView>
            {scrollable content}
        </ScrollView>
    </View>
</TouchableWithoutFeedback>
32
elf2707

これは私のために働いたものです：

<TouchableWithoutFeedback onPress={...}>
  <View>
    <ScrollView>
      <View onStartShouldSetResponder={() => true}>
        // Scrollable content
      </View>
    </ScrollView>
  </View>
</TouchableWithoutFeedback>

onStartShouldSetResponderプロップは、TouchableWithoutFeedback要素へのタッチイベントの伝播を停止します。

19
Rod

TouchableWithoutFeedback内にscrollViewまたはFlatListを含めることができます。 Thoすべきではありませんが、他に選択の余地がない場合もあります。この質問をよく見て、答えが正しいことを確認してください。 閉じる反応ネイティブモーダルoverlay をクリックして、 react native で画面をタップしてモーダルを閉じる方法.

質問の場合、それを機能させる唯一の方法（少なくとも私が知っている方法）、または最も簡単な方法は、このようにコード内のテキストの周囲にTouchableOpacityを追加することです。

 <TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
          <TouchableOpacity>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
          </TouchableOpacity>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

注：TouchableOpacityは、ビューがタッチに適切に応答するためのラッパーであるため、ビューコンポーネントをスタイルした方法で自動的にスタイルを設定し、特別な小道具の一部を、たとえばactiveOpacityなどに設定できます。さらに、TouchableHighlightを使用して機能するただし、子要素を1つ受け取ります。つまり、すべてのコンポーネントを親要素で囲みます。

3
Caleb Tolu

私の状況では、他の例はクリックする機能を無効にするか、スクロールする機能を無効にしたため、機能しないことがわかりました。私は代わりに使用しました：

<FlatList
      data={[{key: text1 }, { key: text2 } ...]}
      renderItem={({ item }) => (
        <TouchableWithoutFeedback onPress={this.onPressContent}>
          <Text style={styles.text}>{item.key}</Text>
        </TouchableWithoutFeedback>
      )}
 />

私はたまたま複数のチャンクを必要としましたが、1つのテキストのデータ配列で単一の要素を使用できます。これにより、プレスイベントが発生し、テキストがスクロールします。

0
Caden