web-dev-qa-db-ja.com

フレックス1を備えたScrollViewは、スクロールできないようにします

ScrollViewでflexを実行しようとしていますが、ScrollViewにflex: 1がある限り、内部でスクロールが機能しません。エキスポフィドル（このコードを実行して遊ぶことができます） https://snack.expo.io/SySerKNp-

ScrollViewからflex: 1を削除すると、スクロールはできますが、フレックスのパワーは失われます（赤いコンテナを押し下げて上部ボックス（ScrollView）を押し上げる機能）そこにフレックスが必要です.

p.s-私はAndroidでのみ作業しており、iPhoneではテストしていません（結果は気にしません）

私は何が欠けていますか？ ScrollViewにflex: 1があると正しく機能しない理由ありがとう！

react-nativeflexboxreact-native-androidreact-native-scrollview
15
Danny

あなたの問題は、flex = 1で使用可能なすべてのスペースを占有するようにScrollViewに指示していることだと思いますが、問題はScrollViewの動作が異なることです。すべての子を自動的にレンダリングするため、フレックスとは異なる動作をします。これは、パフォーマンスが向上した通常のListViewまたはFlatListとの違いです。

このスナックがその問題を解決すると信じています： https://snack.expo.io/SkxN9GOT-

基本的に、デバイスの高さを取得し、（screenHeight-赤いボックスの現在の高さに基づいて）ScrollViewを固定の高さに設定しています。

8
sfratini

次のようにscrollViewコンテンツコンテナスタイルでflex：1の代わりにflexGrow：1を使用してみてください。

<ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: 'green', borderWidth: 5 }}>
  <View style={styles.box1} />
  <View style={styles.box2} />
  <View style={styles.box1} />
</ScrollView>

https://snack.expo.io/HkkEVoh6Z

18
Ankit Aggarwal

最善の方法は、ScrollViewをビューでラップするで、そのビューをflexで制御すると、スクロールビューが追従します。

これは小さな例です

<View style={{flex: 1, flexDirection: 'column',}}>

          <View style={{flex:5, backgroundColor : 'green' }}>
            <ScrollView style={{margin:50, backgroundColor : 'pink' }}>

              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>

            </ScrollView>
          </View>

          <View style={{flex:1, backgroundColor : 'blue' }}>
              <Text> Hello Static View </Text>
          </View>

</View>
1
Sabba Keynejad

この answer には、その方法が既に提供されています。

しかし、ここであなたの方法ではできない理由を説明します。 contentContainerStyleで指定されたスタイルは

すべての子ビューをラップするスクロールビューコンテンツコンテナに適用されます。

したがって、flex: 1からcontentContainerまでScrollViewの完全な高さが必要で、その高さもflex: 1を親としてView。

シミュレートすることもできます-

赤いコンテナを下の箱を押し上げる機能

ScrollViewに親を追加し、親にスタイルを適用することにより

<View style={styles.root}>
  <View style={{ flex: 1, borderColor: 'green', borderWidth: 5 }}>
    <ScrollView>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box1} />
    </ScrollView>
  </View>
  <View style={{ height: this.state.height, backgroundColor: 'red' }}>
    <TouchableOpacity onPress={() => this.setState({ height: this.state.height + 10 })}>
      <Text>Click</Text>
    </TouchableOpacity>
  </View>
</View>
0
Shovon

contentContainerStyleをstyleに置き換えてみてください。私はそれがあなたが期待するものだと信じています： https://snack.expo.io/S1CVrJYa-

0
Alexey Kureev

これを試してみて、問題を100％解決します

import React, { Component } from 'react';
import { AppRegistry, View,ScrollView } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{ flex: 1,flexDirection: 'column' }}>
        <View style={{   height: 50, backgroundColor: 'powderblue'}} />
        <View style={{  flex: 1,  backgroundColor: 'skyblue'}} >
            <ScrollView>

<View style={{  flexDirection: 'column' , minHeight: 'fit-content'}} >
 <View style={{    height:150, backgroundColor: 'red'}} />
    <View style={{ minHeight: 'fit-content', backgroundColor: '#fe3222' }} />      

 <View style={{    height:150, backgroundColor: '#fff222'}} />
    <View style={{    height:150, backgroundColor: '#555222'}} />           
              </View>

  </ScrollView>
 </View>
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
0
user3809729