Reagieren Sie nativ für Android, wie können UI -Elemente an denselben Orten bleiben, wenn ich Text eingibt? ⇐ Android

[Guest]

Ich habe diesen Code in React Native für Android. Wenn ich mit der Eingabe des Textes beginne und die Tastatur angezeigt wird, werden die UI -Elemente nach oben bewegt. Einige UI -Elemente, es ist kein Problem.

Code: Select all

import React from 'react';
import { View, TextInput, Modal, ImageBackground, KeyboardAvoidingView, TouchableOpacity, Image, Platform, StyleSheet, Text } from 'react-native';

const App = () => {
return (







 {
}}
>



'123'


'123'


'8'



 {
}}
>
{768}

  {

}} style={styles.saveButtonOnIncomeScreen}>
{'456'}






);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
bottom: -520,
},
text: {
fontSize: 20,
marginBottom: 10,
},
input: {
height: 50,
width: '80%',
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 10,
borderRadius: 5,
},
imageBackground: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
resizeMode: 'cover',
},
addDateButtonOnIncomeScreen: {
width: 300,
height: 40,
backgroundColor: '#fff',
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
top: 110,
},
saveButtonOnIncomeScreen: {
width: 300,
height: 40,
backgroundColor: '#ff0030',
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
top: 100,
},
inputIncomeDescription: {
backgroundColor: 'white',
padding: 5,
marginTop: 10,
top: 100,
borderRadius: 15,
width: 300,
height: 40,
textAlign: 'center',
},
inputIncomeAmount: {
backgroundColor: 'white',
padding: 5,
marginTop: 10,
top: 100,
borderRadius: 15,
width: 300,
height: 40,
textAlign: 'center',
},
backButtonOnIncomeScreen:
{
right: 150,
bottom: 117,
},
addingIncomeModalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
addingIncomeModalContent: {
padding: 20,
borderRadius: 10,
alignItems: 'center',
},
textWithNumberOnIncomeScreen: {
color: 'white',
fontWeight: 'bold',
fontSize: 60,
top: -5,
},
headerForNewIncomeWindow: {
color: 'white',
fontWeight: 'bold',
fontSize: 20,
top: -140,
},
headerForTextWithNumberOnIncomeScreen: {
color: 'white',
fontWeight: 'bold',
fontSize: 20,
top: -10,
},
roundedRectangleInIncomeView: {
backgroundColor: '#ebf1f4',
width: '100%',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
position: 'absolute',
bottom: 0,
transform: [{ scale: 1 }]
},
});

export default App;