带有ScrollView的KeyboardAvoidingView在react-native或expo中不起作用
[英]KeyboardAvoidingView with ScrollView are Not working in react-native or expo
问题描述
我必须同时使用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>
);
}
请帮我解决这个问题。
先感谢您
1 个解决方案
解决方案1
0 已采纳 2019-05-16 10:37:10
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;
键盘在React Native中使用Scrollview和KeyboardAvoidingView阻止文本输入
[英]Keyboard blocking textinput with Scrollview and KeyboardAvoidingView in react native
KeyboardAvoidingView 在我的代码中不起作用 - 反应原生
[英]KeyboardAvoidingView is not working in my code -react native
如何在React-Native Expo的特定位置的滚动视图内添加浮动Action Button？
[英]How to add a floating Action Button inside a scrollview at a specific position in React-Native Expo?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
React-Native - KeyboardAvoidingView - 错误
键盘在React Native中使用Scrollview和KeyboardAvoidingView阻止文本输入
React-Native 嵌套导航在 expo 中不起作用
Nextjs 不适用于 react-native 和 expo
KeyboardAvoidingView 不适用于 Expo
KeyboardAvoidingView 在我的代码中不起作用 - 反应原生
React-native Expo 语音选项
React-Native Scrollview不起作用
如何在React-Native Expo的特定位置的滚动视图内添加浮动Action Button？
React Native ScrollView不起作用
相关标签