Я разрабатываю приложение в React Native, и проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда я пытаюсь набрать текстовое поле, появляется клавиатура, которая динамически выдвигает или увеличивает вид, изменяя высоту других видов. Пожалуйста, проверьте изображение До и После ниже:
![enter image description here](https://i.stack.imgur.com/9vpqI.png)
Код:
import React, { Component } from 'react';
import t from 'tcomb-form-native'; // 0.6.9
const Form = t.form.Form;
import {
StyleSheet,
View,
KeyboardAvoidingView,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
const styles = StyleSheet.create({
parentSectionContainer: {
flex: 1,
justifyContent: 'space-evenly',
backgroundColor: '#F1F0F2'
},
SignupFormParent: {
marginTop: 100,
alignSelf: 'center',
backgroundColor: '#FFFFFF',
height: '45%',
width: '85%',
borderRadius: 100,
shadowColor: '#2AC062',
shadowOpacity: 0.4,
shadowOffset: { height: 10, width: 0 },
shadowRadius: 20,
},
textMelow: {
width: RFPercentage(10),
fontSize: RFPercentage(2),
fontWeight: "normal",
color: '#FFFFFF',
textTransform: 'uppercase',
fontStyle: 'normal'
},
textBold: {
width: RFPercentage(10),
fontSize: RFPercentage(2),
fontWeight: "bold",
color: '#FFFFFF',
textTransform: 'uppercase',
fontStyle: 'normal'
},
btnContainer: {
paddingTop: 8,
width: '100%',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignContent: 'center'
},
signupBodyStyle: {
position: "absolute",
bottom: 0,
width: '90%',
marginBottom: 20,
},
signinSignupButtonsBtnsContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center',
width: '100%'
},
signupButtonBodyStyle: {
flex: 1,
backgroundColor: '#8A56AC',
borderRadius: 100,
alignItems: 'center',
padding: 25
},
signinSignupTextStyle: {
color: '#FFFFFF',
fontSize: 18,
}
});
const User = t.struct({
name: t.String,
email: t.String,
password: t.String,
"Confirm Password": t.String,
location: t.String
});
const SignupForm = (props) => {
const options = {
auto: 'placeholders',
};
return (
<View style={styles.SignupFormParent}>
<View style={{ paddingLeft: 20, paddingRight: 20, marginTop: 80 }}>
{/* <Text style={styles.text}>FORM</Text> */}
<Form type={User} options={options}/>
</View>
</View>
);
};
const ContinueButton = (props) => {
const { onPress, style } = props;
return (
<TouchableOpacity onPress={onPress} style={style.bodyStyle}>
<View
style={style.buttonStyle}>
<Text style={style.textStyle}>{props.title}</Text>
</View>
</TouchableOpacity>
);
}
export default class SignUpView extends Component {
// constructor(props) {
// }
fetch('${Config.IP}:${Config.PORT}/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: 'jayndoe@foobar.com',
password: "jynd1234",
}),
})
.then(response => response.json())
.then(responseJson => {
ToastAndroid.showWithGravity(
JSON.stringify(responseJson),
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
})
.catch(error => {
ToastAndroid.showWithGravity(
JSON.stringify(error),
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
})
}
render() {
return(
<View style={styles.parentSectionContainer}>
<KeyboardAvoidingView style={{ position: 'absolute', top: 0, width: '100%', backgroundColor: '#8A56AC', height: '30%', borderBottomLeftRadius: 120 }}/>
<View style={{ position: 'absolute', top: 50, width: '100%', flexDirection: 'row', justifyContent: 'space-evenly', margin: 'auto' }}>
<Text style={styles.textBold}>LOG IN</Text>
<Text style={styles.textMelow}>SIGN UP</Text>
</View>
<SignupForm
title="SIGN UP USING INSTAGRAM"
onPress={() => {this.instagramSSO()}}
style={{formStyles: styles.formStyles}}
/>
<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center' }}>
<ContinueButton
title="CONTINUE"
style={{ bodyStyle: styles.signinBodyStyle, buttonStyle: styles.signinButtonBodyStyle, textStyle: styles.signinSignupTextStyle }}
onPress={() => Alert.alert('Please sign-in!!')}
/>
</View>
</View>
);
}
}
Благодарим Вас за любую помощь в решении этой проблемы:)