Question

下面是我的代码，在此代码中，导航栏在以下情况下不固定
键盘向上滚动。每当我点击最后一个textInput时，键盘就会弹出，导航栏也不会固定。请帮助我修复导航栏。

 <View style={{flex: 1, backgroundColor: '#f6f6f6'}}>
    <View style={{height: 44}}>
      <Text style={{fontSize: 16, marginTop: 20}}>
        NavigationBar
      </Text>
    </View>
    <KeyboardAwareScrollView
       automaticallyAdjustContentInsets={false}
       keyboardShouldPersistTaps='always'
       scrollEventThrottle={10}
       extraHeight={250}
       resetScrollToCoords={{x: 0, y: 0}}
    >
      <View>
        <Text style={{fontSize: 16}}>
          Header
        </Text>
      </View>
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />

    </KeyboardAwareScrollView>
  </View>

Answer 1

在KeyboardAwareScrollView中存在问题。

您可以将下面的代码替换为您的代码，在我的代码中，我添加了absolute视图，以便可以将标头设置为absolute的位置。

        <View style={{flex: 1, backgroundColor: '#f6f6f6'}}>
            <View style={{height: 44, position: 'absolute', top: 0, }}>
                <Text style={{fontSize: 16, marginTop: 20}}>
                    NavigationBar
                </Text>
            </View>
            <KeyboardAwareScrollView
                automaticallyAdjustContentInsets={false}
                keyboardShouldPersistTaps='always'
                scrollEventThrottle={10}
                extraHeight={250}
                resetScrollToCoords={{x: 0, y: 0}}
            >
                <View>
                    <Text style={{fontSize: 16}}>
                        Header
                    </Text>
                </View>
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />
                <TextInput style={styles.textInput} />

            </KeyboardAwareScrollView>
        </View>

如何在react-native中使用KeyboardAwareScrollView添加固定标头

1 个答案: