“Reagieren Sie native Scrollview -Element unten” Code-Antworten

Reagieren Sie native Expo -Scrollview -Scrollen nach unten

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

Reagieren Sie native Scrollview -Element unten

/*
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

Ähnliche Antworten wie “Reagieren Sie native Scrollview -Element unten”

Fragen ähnlich wie “Reagieren Sie native Scrollview -Element unten”

Weitere verwandte Antworten zu “Reagieren Sie native Scrollview -Element unten” auf JavaScript

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel