Phản ứng gốc: canh giữa dọc khi sử dụng ScrollView

Question

Tôi đang sử dụng React Native và tôi gặp sự cố khi giữ lại việc căn giữa các phần tử ngay khi tôi giới thiệu ScrollView. Để chứng minh, tôi đã tạo ra 3 ứng dụng với React Native Playground. Tất cả các ví dụ đều có 2 trang và chúng có thể được chuyển đổi bằng cách nhấn vào nút màu lam.

Ví dụ 1:

ví dụ đầu tiên này cho thấy khối trung tâm theo chiều dọc trên trang 2. Điều này xảy ra bởi vì container có những phong cách áp dụng cho nó:

flex: 1, 
flexDirection: 'column', 
justifyContent: 'center', 

https://rnplay.org/apps/lb5wSQ

Tuy nhiên, có vấn đề ngay khi bạn chuyển sang trang 2, vì toàn bộ nội dung của trang không phù hợp, vì vậy chúng tôi cần một số ScrollView.

Ví dụ 2

Trong ví dụ này, tôi quấn tất cả mọi thứ bên trong một scrollview. Điều này cho phép trang 2 để di chuyển, nhưng bây giờ tôi bị mất định tâm dọc của trang 1.

https://rnplay.org/apps/DCgOgA

Ví dụ 3

Để thử và lấy lại định tâm dọc của trang 1, tôi áp dụng flex: 1 cho contentContainerStyle của ScrollView. Này sửa chữa các định tâm thẳng đứng trên trang 1, nhưng tôi không còn khả năng di chuyển tất cả các con đường xuống phía dưới trên trang 2.

https://rnplay.org/apps/LSgbog

Làm thế nào tôi có thể khắc phục điều này vì vậy mà tôi có được định tâm dọc của các yếu tố trên trang 1 nhưng vẫn nhận được ScrollView để cuộn tất cả các cách để dưới cùng trên trang 2?

Answer 1

Tại sao bạn không chỉ quấn trang thứ hai trong ScrollView?

return (
    <ScrollView > 
     <View style={styles.lipsum}> 
      {this.renderButton()} 
      <Text style={styles.lipsumText}>{lipsumText}</Text> 
     </View> 
    </ScrollView> 
); 

Chỉ việc điều chỉnh ví dụ đầu tiên của bạn, nó hoạt động như một nét duyên dáng :)

Answer 2

EDIT: Bây giờ bạn có thể sử dụng <ScrollView contentContainerStyle={{flexGrow: 1}}>.

Đối với phiên bản cũ hơn của React Native không hỗ trợ flexGrow, hãy sử dụng giải pháp bên dưới.

---

Cách duy nhất tôi đã tìm thấy đáng tin cậy làm việc này cho cả iOS và Android là để thiết lập minHeight của cái nhìn bên trong với kích thước của các ScrollView. Ví dụ:

<ScrollView 
    style={{flex: 1}} 
    contentContainerStyle={{minHeight: this.state.minHeight}} 
    onLayout={event => this.setState({minHeight: event.nativeEvent.layout.height})} 
> 

Lưu ý: Tôi có trong lót phong cách và chức năng trên cho đơn giản nhưng có thể bạn sẽ muốn sử dụng tài liệu tham khảo liên tục cho các giá trị không thay đổi và ghi nhớ sự thay đổi phong cách để ngăn chặn rerenders không cần thiết.

const {minHeight} = this.state; 
// Manually memorise changing style or use something like reselect... 
if (this.lastMinHeight != minHeight) { 
    this.lastMinHeight = minHeight; 
    this.contentContainerStyle = {minHeight: minHeight} 
} 
<ScrollView 
    style={styles.scrollViewStyle} 
    contentContainerStyle={this.contentContainerStyle} 
    onLayout={this.onScrollViewLayout} 
> 

Answer 3

Có một giải pháp mới (không may iOS chỉ vào lúc này) - chúng tôi có thể sử dụng centerContent chống trên Scrollview.

Answer 4

tôi giải quyết vấn đề này với flexGrow thay vì flex

<ScrollView contentContainerStyle={{flexGrow: 1}}>

Điều này làm cho căng vùng chứa nội dung để điền vào scrollview nhưng không hạn chế chiều cao tối đa, vì vậy bạn vẫn có thể di chuyển một cách chính xác khi nội dung mở rộng bờ cõi của các scrollview

Answer 5

đây là cách tiếp cận của tôi:

Sử dụng một thùng chứa bên ngoài với flex : 1, sau đó xem di chuyển cần phải có {flexGrow : 1, justifyContent : 'center'} sử dụng contentContainerStyle, không phải style.

<View style={styles.mainContainer}> 
    <ScrollView 
    contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}> 
     <View style={styles.scrollViewContainer}> 
     //Put your stuff here, and it will be centered vertical 
     </View> 
    </ScrollView> 
</View> 

Styles:

const styles = StyleSheet.create({scrollView : { 
height : Dimensions.get('window').height, }, mainContainer : { 
flex : 1 }, scrollViewContainer : { }, })