ios - 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 的官方文档也说要添加行为，所以我就这样做了。

但是 View 没有向上移动，而且我也无法使用 jutifycontent-center，因为我需要 View 仅从顶部开始。

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

忘掉原生组件吧，它有很多 bug。

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