KeyboardAvoidingView在IOS上无法正常工作

Question

I am using keyboardavoidingview in the following scroll to move up keyboard so that the submit button is always visible. But it seems to not work on ios properly, despite setting the property behavior to padding, please help me sort this out.

我已经在SO和Github上提到了很多帖子，但由于用例不同，根本没有任何东西可以帮助我。

由于keyboardavoidingview的官方文档也说要添加行为，所以我做了。

但是观点并没有转移，我也不能使用jutifycontent-center因为我需要视图从顶部开始。

refer ///代码

  render() {
    return (
      <SafeAreaView style={{flex:1}}>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : null}
        style={styles.container}
       keyboardVerticalOffset={Platform.select({ios: 0, android: Header.HEIGHT + 20})}
      >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View>
          <StatusBar backgroundColor="#7c8500" barStyle="light-content" />
          <View>
            <Text style={styles.holdertext}>Name:</Text>
          </View>
          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            value={this.state.username}
            editable={true}
            placeholderTextColor="rgba(0,0,0,0.3)"
            onChangeText={value => this.setState({ username: value })}
          />
          <View style={styles.bottomView}>
            <Text style={styles.holdertext}>Phone:</Text>
          </View>
          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            value={this.state.phonenumber}
            placeholder="Phone"
            placeholderTextColor="rgba(0,0,0,0.3)"
            maxLength={10}
            keyboardType="phone-pad"
            clearButtonMode="always"
            onChangeText={value => this.setState({ phonenumber: value })}
          />

          <View>
            <Text style={styles.holdertext}>Comment:</Text>
          </View>
          <TextInput
            style={styles.commentbox}
            returnKeyType="next"
            underlineColorAndroid="rgba(0,0,0,0)"
            value={this.state.comment}
            placeholder="Comment"
            placeholderTextColor="rgba(0,0,0,0.3)"
            textAlign={"left"}
            numberOfLines={10}
            multiline={true}
            clearButtonMode="always"
            onChangeText={value => this.setState({ comment: value })}
          />
          <TouchableOpacity style={styles.button} onPress={this.callFun}>
            <Text style={styles.buttonText}>SUBMIT</Text>
          </TouchableOpacity>
        </View>
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",


    },
  holdertext: {
    fontSize: 16,
    fontWeight: "bold",
    marginTop: 5,
    marginLeft: 8,
    textAlign: "left"
  },
  inputBox: {
    width: null,
    height: 40,
    backgroundColor: "rgba(229,229,229,0.3)",
    color: "#000000",
    paddingVertical: 10,
    paddingLeft: 10,
    margin: 10,
    marginLeft: 10,
    fontSize: 18,
    borderWidth: 0.3,
    borderRadius: 20,
    borderColor: "rgba(175,180,43,0.8)"
  },
  commentbox: {
    width: null,
    height:100,
    backgroundColor: "rgba(229,229,229,0.3)",
    fontSize: 12,
    color: "#000000",
    paddingVertical: 10,
    paddingLeft: 10,
    margin: 10,
    marginLeft: 10,
    fontSize: 18,
    borderWidth: 0.3,
    borderRadius: 20,
    textAlignVertical: "top",
    borderColor: "rgba(175,180,43,0.8)"
  },
  button: {
    width: null,
    backgroundColor: "#1c313a",
    borderRadius: 25,
    margin: 15,
    paddingVertical: 15
  },
  buttonText: {
    fontSize: 16,
    fontWeight: "500",
    color: "#ffffff",
    textAlign: "center"
  }
});

Answer 1

忘记本机组件，它是非常错误的。

使用这个：https://github.com/APSL/react-native-keyboard-aware-scroll-view