KeyboardAvoidingView - 推動內容

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}}>應包含您內由於您希望此滾動容器在鍵盤出現時也進行調整...