Клавиатура, блокирующая ввод текста с Scrollview и KeyboardAvoidingView в реагировать родной - PullRequest
Новая
       43

Клавиатура, блокирующая ввод текста с Scrollview и KeyboardAvoidingView в реагировать родной

0 голосов
/ 10 сентября 2018

Я использую RN 0.55.4 + Expo

Я пытался использовать KeyboardAvoidingView для своей формы, но это ничего не меняет с или без KeyboardAvoidingView, оно все еще блокирует мою форму. я использую tcomb форма

Это мой текущий код 

 return (
      <View style={styles.container}>

        <KeyboardAvoidingView>
        <ScrollView>

          <View>
            <Header/>

            <View style={styles.inputs}>
              <LoginForm
                formType={formType}
                form={this.props.auth.form}
                value={this.state.value}
                onChange={self.onChange.bind(self)}/>
              {passwordCheckbox}
            </View>

            <FormButton/>

            <View >
              <View style={styles.forgotContainer}>
                {leftMessage}
                {rightMessage}
              </View>
            </View>
          </View>

        </ScrollView>
        </KeyboardAvoidingView>

      </View>
    )

Это стиль 

var styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1
  },
  inputs: {
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10
  },
  forgotContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10
  }
})

Это дисплей enter image description here Я также попробовал библиотеку https://github.com/APSL/react-native-keyboard-aware-scroll-view, но результат все еще тот же, клавиатура блокирует вид / форму. Кто-нибудь знает, что не так?

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Это также случилось со мной ... ScrollView и FlatList могут решить эту проблему, установив динамическую высоту в зависимости от ваших данных в FlatList. например: 

<ScrollView>
  <FlatList style={{height: dataArr.length * YourInputHeight}}
  ...
  />
</ScrollView>
0 голосов
/ 10 сентября 2018

Для iOS вы должны установить для параметра «поведение» KeyboardAvoidingView значение «padding»: 

<KeyboardAvoidingView behavior="padding">

Ссылаясь на реакционную документацию :

Примечание. Android и iOS по-разному взаимодействуют с этим объектом. Android может вести себя лучше, когда ему вообще не дают поведения, тогда как iOS противоположна.

Рабочий пример на iOS и Android: 

<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : null}>
...