ScrollView가있는 KeyboardAvoidingView가 React-Native 또는 Expo 에서 작동하지 않습니다.

React React Native
1

나는 KeyboardAvoidingView 하고 ScrollView를 같이 사용해야 합니다.

하지만 내 문제는 그것이 전혀 작동하지 않는다는 것입니다.

또한 KeyboardAwareScrollView 시도했지만 역시 작동하지 않았습니다.

내 화면이 이것처럼 작동해야 합니다. 예제

이것은 내 코드입니다.

const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
    if (this.state.loading === false) {
      <ActivityIndicator
        style={{ alignItems: "center", justifyContent: "center" }}
        size="large"
      />;
    }
    return (
      < KeyboardAwareScrollView
        style={{ flex: 1 }}
      >
          <SafeAreaView
            style={{
              backgroundColor: "green",
              height: windowHeight,
              width: windowHidth,
              flex: 1
            }}
          >
            <View
              style={{
                height: "100%",
                backgroundColor: "blue",
                paddingTop: 40
              }}
            >
              <View
                style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
              >
                <Image
                  source={require("../../image/testimage.png")}
                  resizeMode="stretch"
                  style={{ alignSelf: "center" }}
                />
                <Text style={{ fontSize: 17, marginTop: "10%" }}>
                  비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
                  있는 방법이 없습니다.
                </Text>

                <Text
                  style={{
                    paddingTop: "6%",
                    fontWeight: "bold",
                    paddingBottom: 10
                  }}
                >
                  지갑 이름
                </Text>

                <TextInput
                  style={styles.walletscreen2textinput}
                  returnKeyType="next"
                  onSubmitEditing={() => this.password.focus()}
                  placeholder={"지갑 이름을 설정하세요."}
                  onChangeText={walletname => this.setState({ walletname })}
                  value={this.state.walletname}
                  textContentType="password"
                  underlineColorAndroid="#fff"
                  autoFocus={true}
                />
                <Text
                  style={{
                    paddingTop: "6%",
                    fontWeight: "bold",
                    paddingBottom: 10
                  }}
                >
                  비밀번호
                </Text>
                <TextInput
                  style={styles.walletscreen2textinput}
                  returnKeyType="next"
                  ref={input => (this.password = input)}
                  onSubmitEditing={() => this.passwordconfirm.focus()}
                  placeholder={
                    "비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
                  }
                  onChangeText={password => this.setState({ password })}
                  value={this.state.password}
                  textContentType="password"
                  underlineColorAndroid="#fff"
                  secureTextEntry={true}
                />
                <Text
                  style={{
                    paddingTop: "6%",
                    fontWeight: "bold",
                    paddingBottom: 10
                  }}
                >
                  비밀번호 확인
                </Text>
                <TextInput
                  style={styles.walletscreen2textinput}
                  returnKeyType="go"
                  ref={input => (this.passwordconfirm = input)}
                  placeholder={"비밀번호를 한번 더 입력하세요."}
                  onChangeText={passwordconfirm =>
                    this.setState({ passwordconfirm })
                  }
                  value={this.state.passwordconfirm}
                  textContentType="nickname"
                  underlineColorAndroid="#fff"
                  secureTextEntry={true}
                />
              </View>
              <View style={{ height: "6%" }}>
                <TouchableOpacity
                  disabled={this.state.disabled}
                  style={styles.walletscreen2button}
                  onPress={ () => {  }}
                >
                  <Text style={{ color: "#fff" }}>생성하기</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
          </SafeAreaView>
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }

KeyboardAwareScrollView 코드 사용

const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
    if (this.state.loading === false) {
      <ActivityIndicator
        style={{ alignItems: "center", justifyContent: "center" }}
        size="large"
      />;
    }
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === "ios" ? "padding" : null}
        enabled
      >
        <ScrollView
          contentContainerStyle={{ flex: 1 }}
          keyboardShouldPersistTaps="always"
        >
          <SafeAreaView
            style={{
              backgroundColor: "green",
              height: windowHeight,
              width: windowHidth
            }}
          >
            <View
              style={{
                height: "100%",
                backgroundColor: "blue",
                paddingTop: 40
              }}
            >
              <View
                style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
              >
                <Image
                  source={require("../../image/testimage.png")}
                  resizeMode="stretch"
                  style={{ alignSelf: "center" }}
                />
                <Text style={{ fontSize: 17, marginTop: "10%" }}>
                  비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
                  있는 방법이 없습니다.
                </Text>

                <Text
                  style={{
                    paddingTop: "6%",
                    fontWeight: "bold",
                    paddingBottom: 10
                  }}
                >
                  지갑 이름
                </Text>

                <TextInput
                  style={styles.walletscreen2textinput}
                  returnKeyType="next"
                  onSubmitEditing={() => this.password.focus()}
                  placeholder={"지갑 이름을 설정하세요."}
                  onChangeText={walletname => this.setState({ walletname })}
                  value={this.state.walletname}
                  textContentType="password"
                  underlineColorAndroid="#fff"
                  autoFocus={true}
                />
                <Text
                  style={{
                    paddingTop: "6%",
                    fontWeight: "bold",
                    paddingBottom: 10
                  }}
                >
                  비밀번호
                </Text>
                <TextInput
                  style={styles.walletscreen2textinput}
                  returnKeyType="next"
                  ref={input => (this.password = input)}
                  onSubmitEditing={() => this.passwordconfirm.focus()}
                  placeholder={
                    "비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
                  }
                  onChangeText={password => this.setState({ password })}
                  value={this.state.password}
                  textContentType="password"
                  underlineColorAndroid="#fff"
                  secureTextEntry={true}
                />
                <Text
                  style={{
                    paddingTop: "6%",
                    fontWeight: "bold",
                    paddingBottom: 10
                  }}
                >
                  비밀번호 확인
                </Text>
                <TextInput
                  style={styles.walletscreen2textinput}
                  returnKeyType="go"
                  ref={input => (this.passwordconfirm = input)}
                  placeholder={"비밀번호를 한번 더 입력하세요."}
                  onChangeText={passwordconfirm =>
                    this.setState({ passwordconfirm })
                  }
                  value={this.state.passwordconfirm}
                  textContentType="nickname"
                  underlineColorAndroid="#fff"
                  secureTextEntry={true}
                />
              </View>
              <View style={{ height: "6%" }}>
                <TouchableOpacity
                  disabled={this.state.disabled}
                  style={styles.walletscreen2button}
                  onPress={ () => {  }}
                >
                  <Text style={{ color: "#fff" }}>생성하기</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
          </SafeAreaView>
      </KeyboardAwareScrollView>
    );
  }

이 문제를 해결하도록 도와주세요.

2

위 첫번째 첨부해주신 예제를 보면 컴포넌트 태그의 열고 닫음의 쌍이 여러군데서 맞지 않습니다.

KeyboardAwareScrollView로 열었지만 ScrollView로 닫는다던지 를 여는 개수와 를 닫는 개수가 안맞습니다. 해당 부분 먼저 확인해보세요.

3

이런 문제는 packager의 로그에 자세히 안내해줍니다. 에러 발생시 에러로그를 먼저 확인하는 습관을 들여보세요. 많은 문제를 풀수 있는 실마리가 로그에 존재하니 문제해결에 많은 도움이 됩니다.

4

아 제가 코드를 잘못 달았습니다. 쌍이 안맞는 부분은 없지만 작동하지 않았습니다.

최종적으로 해결한 결과 KeyboardAwareScrollView는 ios에서만 작동하는 것으로 보입니다.

안드로이드의 경우 KeyboardAvoidingView의 postion을 이용해서 가려지던 문제를 해결했습니다.

스크톨 기능은 넣지 못했구요.