Question

Я должен одновременно использовать 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>
    );
  }

Пожалуйста, помогите мне решить эту проблему.

Заранее спасибо

hong develop · Answer 1 · 16 мая 2019

Экраны Android и iOS были разными, а в случае экранов Android я отказался от Scroll и сосредоточился на предотвращении клавиатуры.

Использование Android: KeyboardAvoidingView

Использование ios: KeyboardAwareScrollView

usepage.js

import React, { Component } from "react";
import {
  View,
  TextInput,
  Image,
  StyleSheet,
  Dimensions,
  KeyboardAvoidingView,
  Platform,
  Text,
  TouchableOpacity,
  Alert,
  ActivityIndicator
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { Ionicons } from "@expo/vector-icons";
import { NavigationActions } from "react-navigation";

class RegisterWalletScreen2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      walletname: "",
      passwordconfirm: "",
      password: "",
      wallet: "",
      disabled: false
    };
  }
  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <TouchableOpacity
          style={{ paddingLeft: 15 }}
          onPress={() => navigation.navigate("FirstAgreeStack")}
        >
          <Ionicons name={"ios-arrow-back"} size={35} color={"black"} />
        </TouchableOpacity>
      ),

      headerRight: null
    };
  };

  render() {
    if (Platform.OS === "ios") {
      return this.state.wallet === "" ? (
        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          <ActivityIndicator size="large" />
        </View>
      ) : (
        <KeyboardAwareScrollView
          style={{ backgroundColor: "#4c69a5" }}
          resetScrollToCoords={{ x: 0, y: 0 }}
          contentContainerStyle={styles.container}
          scrollEnabled={false}
        >
          <View style={{ height: "92%" }}>
            <View
              style={{
                flexDirection: "row",
                paddingLeft: 30,
                paddingTop: 22
              }}
            >
              <Image
                source={require("../../image/minigroup.png")}
                style={{
                  resizeMode: "stretch"
                }}
              />
              <View
                style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
              >
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_gray.png")}
                />
              </View>
              <View style={{ paddingLeft: 6 }}>
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_yellow.png")}
                />
              </View>
              <View style={{ paddingLeft: 6 }}>
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_gray.png")}
                />
              </View>
              <View style={{ paddingLeft: 6 }}>
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_gray.png")}
                />
              </View>
            </View>
            <View
              style={{
                paddingLeft: "9%",
                paddingBottom: "28%"
              }}
            >
              <Text style={{ fontSize: 18, paddingTop: 19 }}>지갑 생성</Text>
              <Text style={{ fontSize: 16, marginTop: 10 }}>
                {`지갑명과 보안을 위해 비밀번호를 ${"\n"}설정해주세요. `}
              </Text>

              <Text
                style={{
                  paddingTop: 22,
                  fontWeight: "bold",
                  paddingBottom: 8,
                  fontSize: 14
                }}
              >
                지갑 이름
              </Text>

              <TextInput
                style={styles.walletscreen2textinput}
                returnKeyType="next"
                onSubmitEditing={() => this.password.focus()}
                placeholder={"지갑 이름을 입력해주세요."}
                onChangeText={walletname => this.setState({ walletname })}
                value={this.state.walletname}
                textContentType="nickname"
                // autoFocus={true}
                underlineColorAndroid={"#f6f6ef"}
              />
              <View style={{ flexDirection: "row" }}>
                <Text
                  style={{
                    paddingTop: 30,
                    fontWeight: "bold",
                    paddingBottom: 8,
                    fontSize: 14
                  }}
                >
                  비밀번호
                </Text>
                <Text
                  style={{
                    paddingTop: 30,
                    paddingBottom: 8,
                    fontSize: 12,
                    color: "#434343",
                    paddingLeft: 7
                  }}
                >
                  영문/숫자 조합,8자리 이상
                </Text>
              </View>
              <TextInput
                style={styles.walletscreen2textinput}
                returnKeyType="next"
                ref={input => (this.password = input)}
                onSubmitEditing={() => this.passwordconfirm.focus()}
                placeholder={"비밀번호를 설정해주세요."}
                onChangeText={password => this.setState({ password })}
                value={this.state.password}
                textContentType="password"
                underlineColorAndroid={"#f6f6ef"}
                secureTextEntry={true}
              />
              <Text
                style={{
                  paddingTop: 30,
                  fontWeight: "bold",
                  paddingBottom: 8,
                  fontSize: 14
                }}
              >
                비밀번호 확인
              </Text>
              <TextInput
                style={styles.walletscreen2textinput}
                returnKeyType="go"
                ref={input => (this.passwordconfirm = input)}
                placeholder={"비밀번호를 한번 더 입력해주세요."}
                onChangeText={passwordconfirm =>
                  this.setState({ passwordconfirm })
                }
                value={this.state.passwordconfirm}
                textContentType="password"
                underlineColorAndroid={"#f6f6ef"}
                secureTextEntry={true}
              />
            </View>
          </View>
          <View style={{ height: "8%" }}>
            <TouchableOpacity
              disabled={this.state.disabled}
              style={styles.walletscreen2button}
              onPress={async () => {
                if (this.state.password.length < 8) {
                  Alert.alert("안내", "비밀번호 규칙에 맞지 않습니다.");
                } else {
                  if (this.state.password !== this.state.passwordconfirm) {
                    Alert.alert("안내", "비밀번호가 일치하지 않습니다.");
                  }
                  if (this.state.password === this.state.passwordconfirm) {
                    Alert.alert("안내", "잠시만 기다려주세요.");
                    this.setState({
                      disabled: true
                    });
                    await this.createKeystore();
                    await this.download();
                    this.props.navigation.navigate("RegisterWallet3", {
                      walletname: this.state.walletname,
                      publicaddress: this.state.address,
                      v3: this.state.keystore
                    });
                  }
                }
              }}
            >
              <Text style={{ color: "#fff" }}>생성하기</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAwareScrollView>
      );
    } else {
      return this.state.wallet === "" ? (
        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          <ActivityIndicator size="large" />
        </View>
      ) : (
        <KeyboardAvoidingView
          behavior="position"
          keyboardVerticalOffset={keyboardVerticalOffset}
          style={styles.container}
        >
          <View style={{ height: "92%" }}>
            <View
              style={{
                flexDirection: "row",
                paddingLeft: 30,
                paddingTop: 22
              }}
            >
              <Image
                source={require("../../image/minigroup.png")}
                style={{
                  resizeMode: "stretch"
                }}
              />
              <View
                style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
              >
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_gray.png")}
                />
              </View>
              <View style={{ paddingLeft: 6 }}>
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_yellow.png")}
                />
              </View>
              <View style={{ paddingLeft: 6 }}>
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_gray.png")}
                />
              </View>
              <View style={{ paddingLeft: 6 }}>
                <Image
                  style={{
                    resizeMode: "stretch"
                  }}
                  source={require("../../image/oval_gray.png")}
                />
              </View>
            </View>
            <View
              style={{
                paddingLeft: "9%"
              }}
            >
              <Text style={{ fontSize: 18, paddingTop: 19 }}>지갑 생성</Text>
              <Text style={{ fontSize: 16, marginTop: 10 }}>
                {`지갑명과 보안을 위해 비밀번호를 ${"\n"}설정해주세요. `}
              </Text>

              <Text
                style={{
                  paddingTop: 22,
                  fontWeight: "bold",
                  paddingBottom: 8,
                  fontSize: 14
                }}
              >
                지갑 이름
              </Text>

              <TextInput
                style={styles.walletscreen2textinput}
                returnKeyType="next"
                onSubmitEditing={() => this.password.focus()}
                placeholder={"지갑 이름을 입력해주세요."}
                onChangeText={walletname => this.setState({ walletname })}
                value={this.state.walletname}
                textContentType="nickname"
                // autoFocus={true}
                underlineColorAndroid={"#f6f6ef"}
              />
              <View style={{ flexDirection: "row" }}>
                <Text
                  style={{
                    paddingTop: 30,
                    fontWeight: "bold",
                    paddingBottom: 8,
                    fontSize: 14
                  }}
                >
                  비밀번호
                </Text>
                <Text
                  style={{
                    paddingTop: 30,
                    paddingBottom: 8,
                    fontSize: 12,
                    color: "#434343",
                    paddingLeft: 7
                  }}
                >
                  영문/숫자 조합,8자리 이상
                </Text>
              </View>
              <TextInput
                style={styles.walletscreen2textinput}
                returnKeyType="next"
                ref={input => (this.password = input)}
                onSubmitEditing={() => this.passwordconfirm.focus()}
                placeholder={"비밀번호를 설정해주세요."}
                onChangeText={password => this.setState({ password })}
                value={this.state.password}
                textContentType="password"
                underlineColorAndroid={"#f6f6ef"}
                secureTextEntry={true}
              />
              <Text
                style={{
                  paddingTop: 30,
                  fontWeight: "bold",
                  paddingBottom: 8,
                  fontSize: 14
                }}
              >
                비밀번호 확인
              </Text>
              <TextInput
                style={styles.walletscreen2textinput}
                returnKeyType="go"
                ref={input => (this.passwordconfirm = input)}
                placeholder={"비밀번호를 한번 더 입력해주세요."}
                onChangeText={passwordconfirm =>
                  this.setState({ passwordconfirm })
                }
                value={this.state.passwordconfirm}
                textContentType="password"
                underlineColorAndroid={"#f6f6ef"}
                secureTextEntry={true}
              />
            </View>
          </View>
          <View style={{ height: "8%" }}>
            <TouchableOpacity
              disabled={this.state.disabled}
              style={styles.walletscreen2button}
              onPress={async () => {
                if (this.state.password.length < 8) {
                  Alert.alert("안내", "비밀번호 규칙에 맞지 않습니다.");
                } else {
                  if (this.state.password !== this.state.passwordconfirm) {
                    Alert.alert("안내", "비밀번호가 일치하지 않습니다.");
                  }
                  if (this.state.password === this.state.passwordconfirm) {
                    Alert.alert("안내", "잠시만 기다려주세요.");
                    this.setState({
                      disabled: true
                    });
                    await this.createKeystore();
                    await this.download();
                    this.props.navigation.navigate("RegisterWallet3", {
                      walletname: this.state.walletname,
                      publicaddress: this.state.address,
                      v3: this.state.keystore
                    });
                  }
                }
              }}
            >
              <Text style={{ color: "#fff" }}>생성하기</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
      );
    }
  }
}
const keyboardVerticalOffset = -180;
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    flex: 1
  },
  walletscreen2textinput: {
    width: "90%",
    //   height: "10%",
    height: 40,
    paddingHorizontal: 10,
    backgroundColor: "#f6f6ef"
  },
  walletscreen2button: {
    height: "100%",
    backgroundColor: "#797771",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  }
});

export default RegisterWalletScreen2;

KeyboardAvoidingView с ScrollView не работают в реагировать родной или экспо

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

KeyboardAvoidingView с ScrollView не работают в реагировать родной или экспо

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы