Question

react-native-keyboard-aware-scroll-view在Android上不滚动，这是一个问题，因为当我单击顶部的textInput时，它消失了，并且无法滚动到视图中。

我添加了

android：windowSoftInputMode =“ adjustPan”

到Android清单，并且我已经在文件顶部导入了react-native-keyboard-aware-scroll-view。这是我的代码。

<View>
        <TouchableOpacity style={this.props.addressDisplayStyle} accessibilityLabel={'addressSelected'} onPress={() => this.setState({showModal: true})}>
          <Text numberOfLines={6} ellipsizeMode ={'tail'} style={[styles.text, styles.secondaryText, styles.selectedText, styles.addressText]}>{this.props.address}</Text>
        </TouchableOpacity>
        <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.showModal}
            onRequestClose={() => this.closeModal()}
              >
          <KeyboardAwareScrollView
            resetScrollToCoords={{ x: 0, y: 0 }}
            contentContainerStyle={[styles.fadedBackground, { justifyContent: 'center', flexGrow: 1}]}
            scrollEnabled={true}
            enableAutomaticScroll={(Platform.OS === 'ios')}
            enableOnAndroid={true}
          >
              <View style={styles.modalContainer}>
                <Text style={[styles.text, styles.titleText]}>Enter Address</Text>
            <TextInput
              maxLength={300}
              multiline = {false}
              placeholder = {'123 Street'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({street: changedText})}
              value={this.state.street}
            />
            <TextInput
              maxLength={300}
              multiline = {false}
              placeholder = {'Apt #'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({street2: changedText})}
              value={this.state.street2}
            />
            <TextInput
              maxLength={300}
              multiline = {false}
              placeholder = {'city'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({city: changedText})}
              value={this.state.city}
            />
            <TextInput
              maxLength={2}
              multiline = {false}
              placeholder = {'State'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({state: changedText})}
              value={this.state.state}
            />
            <TextInput
              maxLength={10}
              keyboardType={'numeric'}
              multiline = {false}
              placeholder = {'Zipcode'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({zipcode: changedText})}
              value={this.state.zipcode}
            />
            {this.state.loading?
              <Loading />
              :
              null
            }
              </View>
        </KeyboardAwareScrollView>
            </Modal>
      </View>

我尝试在KeyboardAwareScrollView之前和之后添加scrollview，并希望将其扭曲，但我似乎无法使其在android上正常工作。

Answer 1

这是当键盘出现和滚动问题时我如何处理textinput隐藏的方法。我确实使用了这个库，但是没有得到想要的结果。我查看了源代码，并使用本机组件提出了自己的解决方案。

这是我的渲染方法：请注意，我已经创建了一些包装器组件，例如Button和CustomizedTextInput，但是ScrollView的属性应该可以满足您的需求。

  <ScrollView keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={false}>

        {this.renderImage(styles)}
        <View style={styles.container}>
        <View style={styles.buttons}>
            <TouchableOpacity
              style={[styles.button,social,{justifyContent:'center'}]}>
              <Icon name={'logo-facebook'} size={25} style={[awesome,hero,accentColor,center,{alignSelf:'center'}]}/>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.button,social,{justifyContent:'center'}]}
              >
              <Icon name={'logo-twitter'} size={25} style={[awesome,hero,accentColor,center,{alignSelf:'center'}]}/>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.button,social,{justifyContent:'center'}]} >
              <Icon name={'logo-google'} size={25} style={[awesome,hero,accentColor,center,{alignSelf:'center'}]}/>
            </TouchableOpacity>
          </View>
          <CustomizedTextInput
            placeholder='Username'
            autoCapitalize="none"
            autoCorrect={false}
            backgroundColor={Theme[this.props.theme].colors.control.background}
            borderColor={Theme[this.props.theme].colors.border.base}
            borderRadius={24}
            placeholderTextColor={baseColor.color}
            value={this.state.username}
            onChangeText={val => this.onChangeText('username', val)}
          />
          <CustomizedTextInput
            placeholder='Password'
            autoCapitalize="none"
            autoCorrect={false}
            backgroundColor={Theme[this.props.theme].colors.control.background}
            borderColor={Theme[this.props.theme].colors.border.base}
            borderRadius={24}
            placeholderTextColor={baseColor.color}
            value={this.state.password}
            onChangeText={val => this.onChangeText('password', val)}
          />
              <Button
                  text='LOGIN'
                  borderRadius={24}
                  color={Theme[this.props.theme].colors.gradients.base[0]}
                  style={[{width: 300},{height:50},baseColor,styles.save]}
                  textStyle={[inverseColor]}
                  onPress={this.signIn}
                />

                <View style={styles.footer}>
                <View style={styles.textRow}>
                  <Text style={[primary3, baseColor]}>Don’t have an account? </Text>
                  <TouchableOpacity
                  onPress={()=>this.props.navigation.navigate('auth.signup')}
                  style={[clear]} >
                  <Text style={[header6, baseColor]}>Sign up now</Text>
                </TouchableOpacity>
                </View>
              </View>


          </View>
          </ScrollView>

react-native-keyboard-aware-scroll-view在Android上不滚动

1 个答案: