React Native - ScrollView mit Bildlaufeingabe am unteren Bildschirmrand

Question

Ich arbeite an einer reaktionsfähigen nativen mobilen Anwendung für iOS und versuche, ein überlagertes TextInput am unteren Rand einer ScrollView bleiben zu bleiben. Mein erster Gedanke war, es außerhalb der ScrollView zu bewegen, und das funktioniert, aber erlaubt nicht die Überlagerung der Komponente über den scrollenden Inhalt.

Hier ist eine Probe von meinem Code:

Grundidee: <ScrollView style={styles.tabView}> <View> </View> <TextInput style={styles.input} /> </ScrollView>

Ich kann es nur bekommen einen der zu folgenden Aktionen ausführen: 1 bleiben) ohne Overlay unten und 2) nur Anzeige an der untere Teil der gesamten Bildlaufansicht.

Gibt es das Beste aus beiden Welten?

Jede Hilfe mit diesem würde sehr geschätzt werden.

Vielen Dank.

Answer 1

Sie können die Scroll wickeln und die TextInput- in einem Container und dann das Textview-Stil halb transparent und Position ‚absolute‘ und kleben Sie es auf dem Boden des Behälters ..

<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue'}}> 
    <View style={{height: 400, width: 400}}>     
     <ScrollView> 
     <View style={{backgroundColor: 'green'}}> 
      // Your data here 
     </View> 
     </ScrollView> 
     <TextInput style={{backgroundColor: '#c4c4c4dd', position: 'absolute', bottom: 0, left: 0, right: 0}} /> 
    </View> 
    </View> 

Sie this example sehen was ich für dich vorbereitet habe. Genießen.