Я разрабатываю форму, в которой TextInputs хранятся внутри ScrollView, а View удерживает кнопку внизу. Затем я включил KeyboardAccessoryNavigation в контейнер для управления следующей и предыдущей кнопкой.
Проблема в том, что всякий раз, когда я использую вид нижней палки высотой 40, KeyboardAccessoryNavigation также принимает дополнительную высоту, как показано на рисунке.
render() {
const Button = ({title, color, width, onPress }) => {
return (
<View style={ {width: width, height: 40} }>
<TouchableOpacity onPress = { onPress } style= { {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'lightgray',
borderRadius: 5} }>
<Text style = { {color: color, fontWeight: 'bold', fontSize: 17 }} > { title } </Text>
</TouchableOpacity>
</View>
);
};
return(
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<ScrollView style={styles.container}>
<View style={styles.inputsContainer}>
{inputs.map((input, index) =>
<TextInput
style={styles.input}
placeholder = {input.placeholder}
ref = {input.ref}
autoCapitalize = 'words'
onFocus = {this.handleFocus(index)}
keyboardType = 'default'
keyboardType = {input.keyboardType}/>
)}
</View>
</ScrollView>
<KeyboardAccessoryNavigation
nextDisabled={this.state.nextFocusDisabled}
previousDisabled={this.state.previousFocusDisabled}
onNext={this.handleFocusNext}
onPrevious={this.handleFocusPrevious}
tintColor='black'
nextButtonStyle = {styles.nextButton}
avoidKeyboard = {true}
androidAdjustResize = { true }
/>
</View>
<View style={{
height: 60,
flexDirection:'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'gray',
}}>
<Button title='Continue' color='black' width='60%'
onPress={this.signUpAction}></Button>
</View>
</SafeAreaView>
)
}