Question

我在app.js中应用了react-native-keyboard-aware-scroll-view（这是我的应用的基本文件），使其在整个应用程序中都有效。

return ( 
            <KeyboardAwareScrollView>              
              <AppInitialComponent /> 
              <RouterBar />
            </KeyboardAwareScrollView>
      );

我的应用程序包含几个带有字段的Modal窗口。

包适用于Modal窗口外的字段，但不适用于Modal窗口内的字段。

我是否需要从其他地方拨打react-native-keyboard-aware-scroll-view以使其适用于Modal窗口字段？

Answer 1

如果您有模态，请不要放入app.js。包括在需要的地方。例如

   <Modal>
      <KeyboardAwareScrollView>

Answer 2

您可以使用KeyboardAwareScrollView包

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
 render(){
return(

  <View>
    <Modal
      animationType={"slide"}
      transparent={false}
      visible={this.props.visible}
      onRequestClose={this.props.closeModal}>
      <KeyboardAwareScrollView>
        <View style={this.props.styles.descriptionContiner}>
          <View>
            <View style={this.props.styles.descriptionHeading}>
              <Text style = {this.props.styles.descriptionHeadingFont}>{this.props.title}</Text>
            </View>
            <View style = {this.props.styles.CloseModalIcon}>
             <TouchableOpacity onPress={this.props.closeModal}>
                <Image
                  source={require('../assets/images/delete-sign.png')} 
                  style={this.props.styles.CloseModalImage}
                />
              </TouchableOpacity>
            </View>
          </View>
          <TextInput
            onChange={(attr, value) => this.props.updateAttr('name', value)}
            value={this.props.value}
            placeholder={this.props.placeholder}
            autoFocus={true}
            multiline={true}
            numberOfLines={8}
            style={styles.input} 
            />
          <View style={this.props.styles.ModalSaveButton}>
          <Button
            title= {this.props.SaveTitle}
            onPress={this.props.closeModal}
            color="#44c8f5"
          />
          </View>
        </View>
      </KeyboardAwareScrollView>
    </Modal>
  </View> 
)

} }

react-native-keyboard-aware-scroll-view不适用于Modal窗口字段

2 个答案: