KeyboardAvoidingView无法按预期工作

Question

反应本机-KeyboardAvoidingView问题

这就是我想要的：

这是我目前所拥有的

如果可以得到帮助，请链接到我的小吃：https://snack.expo.io/@dhavaljardosh/keyboardavoidingview

这是我的代码，请告诉我我需要更改什么

<View style={{ marginTop: 24 }}>
  <View>
    <Header title="Create Event" prop={details} route="Profile" />
  </View>

  <View>
    <View style={styles.topBlock}>
      <View style={{ display: "flex", flexDirection: "row" }}>
        <Image />
        <Text style={{ marginLeft: 10, fontSize: 16, fontWeight: "bold" }}>
          {firstName} {lastName}
        </Text>
      </View>
      <View>
        <TouchableWithoutFeedback>
          <View style={styles.publicButton}>
            <Image />
            <Text>Public</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    </View>
    <ScrollView>
      <KeyboardAvoidingView behaviour={"padding"} enabled style={{
                    flex: 1,
                    marginLeft: 10,
                    marginRight: 10
                  }}>
        <View style={{
                      borderColor: "black",
                      borderWidth: 0.4,
                      borderRadius: 5,
                      marginTop: 10,
                      marginBottom: 10
                    }}>
          <Picker style={{ height: 40, width: "100%", borderColor: "black" }} onValueChange={(itemValue, itemIndex)=>
            this.setState({ games: itemValue })
            }
            >
            //There are items not listed here
          </Picker>
        </View>
        <View style={{
                      display: "flex",
                      flexDirection: "row",
                      height: 40,
                      justifyContent: "center",
                      marginBottom: 10
                    }}>
          <View style={{
                        width: "60%",
                        borderColor: "black",
                        borderWidth: 0.4,
                        borderRadius: 5,
                        marginRight: 10
                      }}>
            <Picker style={{ borderColor: "black", height: "100%" }} onValueChange={(itemValue, itemIndex)=>
              this.setState({ games: itemValue })
              }
              >
              //Items not listed here
            </Picker>
          </View>
          <View style={{ flex: 1 }}>
            <TouchableOpacity style={{
                          flex: 1,
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          height: 35,
                          backgroundColor: "royalblue",
                          borderRadius: 7,
                          elevation: 3
                        }}>
              <Text style={{ color: "white" }}>Create List</Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{ marginBottom: 10 }}>
          <TextInput placeholder="Opponent Team Name" style={{
                        borderColor: "black",
                        borderWidth: 0.4,
                        borderRadius: 5,
                        height: 40,
                        paddingLeft: 5,
                        color: "black"
                      }} underlineColorAndroid="transparent" />
        </View>
        <View style={{ height: 40, marginBottom:10 }}>
          <DatePicker />
        </View>
        <View>
          <GooglePlacesAutocomplete />
        </View>
        <View style={{ marginBottom: 10 }}>
          <TextInput />
        </View>
        <View style={{ marginBottom: 10 }}>
          <TextInput />
        </View>
      </KeyboardAvoidingView>
    </ScrollView>
  </View>
</View>

即使是在搜索“ Keyboard Aware Scroll View”，也是在Avoiding Keyboard View上的一篇非常好的文章，但都无法完全理解。

感谢您的帮助。