Question

我正在尝试使用KeyboardAvoidingView（也尝试了一些替代方案），但它要么在输入字段上显示键盘，要么在键盘和输入字段之间添加大量填充。当我对任何其他内容的页面进行条带化时，它会更好一点，只会在输入字段和键盘之间添加一些填充。

问题演示：

http://i.imgur.com/qoYgJpC.gifv

<KeyboardAvoidingView behavior={'position'}>
    {this.state.story.image_key ?
        <View style={{flex: 1}}>
            <Image style={styles.storyBackgroundImage} source={{uri: this.state.story.image_url}} />
            <VibrancyView
              style={styles.absolute}
              blurType="light"
              blurAmount={25}
            />
            <Image style={styles.storyImage} source={{uri: this.state.story.image_url}} />
        </View>
        : null
    }
    <View style={styles.storyContainer}>
        <Text style={styles.storyTitle}>{this.state.story.title}</Text>
        <Text style={styles.chapterHeader} onPress={() => navigate('User', { id: this.state.story.author.id, name: this.state.story.author.name })}>Chapter 1 by {this.state.story.author.name}</Text>
        <Text style={styles.storyText}>{this.state.story.content}</Text>
        {this.state.story.chapters.map(function(chapter, i) {
            return <ChapterComponent chapter={chapter} key={i} navigation={() => navigate('User', { id: chapter.author.id, name: chapter.author.name })}></ChapterComponent>
        })}
        <WritingComponent></WritingComponent>
    </View>
</KeyboardAvoidingView>

WritingComponent

import React from 'react';
import {
    AppRegistry,
    TextInput
} from 'react-native';

export default class WritingComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    render() {
        return (
            <TextInput
                style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                multiline={true}
                onChangeText={(text) => this.setState({text})}
                value={this.state.text}
            />
        )
    }
}

AppRegistry.registerComponent('WritingComponent', () => WritingComponent);

Link to code

Answer 1

我认为问题是滚动视图，<ScrollView style={{flex: 1}}>应该包含在KeyboardAvoidingView中，因为你想要在键盘出现时调整滚动容器的大小......

KeyboardAvoidingView - 推高内容

1 个答案: