“Gulir Gulir Gulir ke Bawah Bereaksi Asli” Kode Jawaban

Gulir Gulir Gulir ke Bawah Bereaksi Asli

import React, { useRef } from 'react';
import { ScrollView } from 'react-native';

const ScreenComponent = (props) => {
  const scrollViewRef = useRef();
  return (
    <ScrollView
      ref={scrollViewRef}
      onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })}
    />
  );
};
Worried Wombat

React Native ScrollView Item Bottom

/*
The key is the contentContainerStyle property
(doc: https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle).
"These styles will be applied to the scroll view content container which wraps all of the child views. "

After setting flexGrow: 1, justifyContent: 'space-between',
flexDirection: 'column' in contentContainerStyle,
one can set justifyContent: 'flex-start' for the upper container view 
with the text, and justifyContent: 'flex-end' for the lower 
container view with the buttons. 
*/

<ScrollView
  contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column' }}
  style={{ backgroundColor: 'white', paddingBottom: 20 }}
>
  <View style={{ flex: 1, justifyContent: 'flex-start' }}>
    <Text>Some text with different length in different cases, or some input fileds.</Text>
  </View>
  <View style={{ flex: 1, justifyContent: 'flex-end' }}>
    <View>
      <TouchableOpacity style={[commonStyles.greenButton, styles.buttonPadding]}>
        <Text style={commonStyles.greenButtonTitle}>Next</Text>
      </TouchableOpacity>
    </View>
    <View>
      <TouchableOpacity style={styles.cancelButtonContainer}>
        <Text style={styles.cancelButton}>Cancel</Text>
      </TouchableOpacity>
    </View>
  </View>
</ScrollView>
Beautiful Bee

Jawaban yang mirip dengan “Gulir Gulir Gulir ke Bawah Bereaksi Asli”

Pertanyaan yang mirip dengan “Gulir Gulir Gulir ke Bawah Bereaksi Asli”

Lebih banyak jawaban terkait untuk “Gulir Gulir Gulir ke Bawah Bereaksi Asli” di JavaScript

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya