javascript - 当键盘在 native 中打开时，如何在 textinput 下面显示组件？

Question

我希望在键盘打开时显示兴趣文本框下方的标签。芯片组件是从react native纸库输入的标签。我试过使用 scrollview、keyboardavoidingview 和 keyboardawarescrollview 让标签在键盘打开时显示，但没有一个 View 修复问题。我会遗漏或做错什么？

  GetTags = () => {
    const tagsComponent = [];
    if (typeof this.state.interests !== "undefined") {
      for (let i = 0; i < this.state.interests.length; i++) {
        tagsComponent.push(
          <Chip
            key={i}
            style={{ margin: 3 }}
            onClose={() => {
              this.setState(prevState => ({
                interests: prevState.interests.filter(
                  x => x !== prevState.interests[i]
                )
              }));
            }}
          >
            {this.state.interests[i]}
          </Chip>
        );
      }
    }
    return tagsComponent;
  };

  render() {
    const displayTags = this.GetTags();
    return (
      <ScrollView style={{ marginTop: 20 }} keyboardShouldPersistTaps="always">
        <View
          style={{
            flex: 1,
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          {this.state.profile ? (
            <Avatar
              size="xlarge"
              rounded
              source={{ uri: this.state.profile }}
              showEditButton
              onEditPress={() => this.onChooseImageUpload()}
            />
          ) : (
            <Avatar
              {...this.state.avatarError}
              size="xlarge"
              rounded
              icon={{
                name: "user",
                type: "font-awesome"
              }}
              showEditButton
              onEditPress={() => this.onChooseImageUpload()}
            />
          )}
          <Text
            style={{
              fontWeight: "500",
              fontSize: 20,
              marginTop: 8,
              marginRight: "70%",
              color: "#5b5b5b"
            }}
          >
            About me
          </Text>
          <TextInput
            style={{
              borderColor: Themes.layoutTheme,
              borderWidth: 1,
              width: "100%",
              marginTop: 5,
              padding: 5,
              textAlignVertical: "top"
            }}
            multiline
            numberOfLines={7}
            placeholder="Type something about yourself..."
            onChangeText={text => this.setState({ bio: text })}
            value={this.state.bio}
          />
          <View style={{ flexDirection: "row" }}>
            <Text
              style={{
                fontWeight: "500",
                fontSize: 20,
                marginTop: 22,
                color: "#5b5b5b"
              }}
            >
              Interests
            </Text>
            <RNPTextInput
              ref={input}
              style={{
                height: 45,
                marginTop: 10,
                marginRight: 82,
                marginLeft: 10
              }}
              underlineColor={Themes.primaryTheme}
              placeholder="Example: Skydiving,"
              theme={{ colors: { primary: Themes.primaryTheme } }}
              onChangeText={text => {
                if (text.endsWith(",")) {
                  const newText = text.replace(",", "");
                  if (typeof this.state.interests === "undefined") {
                    this.setState({ interests: [newText] });
                  } else {
                    this.setState(prevState => ({
                      interests: [...prevState.interests, newText]
                    }));
                  }
                  input.current.clear();
                }
              }}
            />
          </View>
          <View
            style={{
              marginTop: 15,
              flexDirection: "row",
              flexWrap: "wrap",
              alignItems: "flex-start"
            }}
          >
            {displayTags}
          </View>
          {this.state.loading ? (
            <Progress.Bar
              style={{ marginTop: 25 }}
              indeterminate
              color={Themes.primaryTheme}
            />
          ) : (
            <Button
              raised
              containerStyle={{
                width: "25%",
                marginTop: 20
              }}
              buttonStyle={{ backgroundColor: Themes.primaryTheme }}
              title="Save"
              onPress={() => {
                if (fireStoreDB.getAvatar == null) {
                  this.setState({
                    avatarError: {
                      containerStyle: { borderWidth: 1, borderColor: "red" }
                    }
                  });
                } else {
                  fireStoreDB
                    .updateProfile(this.state.bio, this.state.interests)
                    .then(() => this.props.navigation.navigate("Home"));
                }
              }}
            />
          )}
        </View>
      </ScrollView>
    );
  }

Answer 1

我通过使用 padding 行为将 content 包装在 KeyboardAvoidingView 中并在文本输入上方显示筹码来解决这个问题。

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
  <Content>
    <View style={{ marginTop: "7%" }} />
    {this.state.profile ? (
      <Avatar
        size="xlarge"
        rounded
        containerStyle={{ alignSelf: "center" }}
        source={{ uri: this.state.profile }}
        showEditButton
        onEditPress={() => this.onChooseImageUpload()}
      />
    ) : (
      <Avatar
        {...this.state.avatarError}
        size="xlarge"
        rounded
        containerStyle={{ alignSelf: "center" }}
        icon={{
          name: "user",
          type: "font-awesome"
        }}
        showEditButton
        onEditPress={() => this.onChooseImageUpload()}
      />
    )}
    <Text
      uppercase={false}
      style={{
        fontWeight: "500",
        fontSize: 20,
        marginTop: "6%",
        marginLeft: "1%",
        color: "#5b5b5b"
      }}
    >
      About me
    </Text>
    <TextInput
      style={{
        borderColor: Themes.layoutTheme,
        borderWidth: 1,
        width: "100%",
        marginTop: 5,
        padding: 5,
        textAlignVertical: "top"
      }}
      multiline
      numberOfLines={7}
      placeholder="Type something about yourself..."
      onChangeText={text => this.setState({ bio: text })}
      value={this.state.bio}
    />
    <Text
      style={{
        fontWeight: "500",
        fontSize: 20,
        marginTop: 22,
        marginLeft: "1.5%",
        color: "#5b5b5b"
      }}
    >
      Interests
    </Text>
    <View
      style={{
        marginTop: 15,
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "flex-start"
      }}
    >
      {displayTags}
    </View>
    <Input
      ref={input}
      style
      inputContainerStyle={{
        borderBottomColor: Themes.layoutTheme
      }}
      placeholder="What, are, your, interests"
      onChangeText={text => {
        if (text.endsWith(",")) {
          const newText = text.replace(",", "");
          if (typeof this.state.interests === "undefined") {
            this.setState({ interests: [newText] });
          } else {
            this.setState(prevState => ({
              interests: [...prevState.interests, newText]
            }));
          }
          input.current.clear();
        }
      }}
    />
  </Content>
</KeyboardAvoidingView>