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

KeyboardAvoidingView在IOS上无法按预期工作

1 个答案: