我正在尝试在针对Android和iOS平台的本地本机中创建此滑动动画。我已经做到了这是iOS,但它不能在Android中使用。
这是我所做的,并且在iOS中工作正常
<View
style={{
marginTop: p * 40, justifyContent: 'center', alignItems: 'center'
}}
>
<ScrollView
horizontal={false}
ref={c => {
this._scrollView = c;
}}
scrollEnabled={this.state.scrollerEn}
style={{ width: p * 260, height: p * 250 }}
>
<View>
<View
style={{
opacity: this.state.opacityView
}}
onLayout={event => {
this.find_dimesions(event.nativeEvent.layout);
}}
>
<View style={{
}}>
<TouchableOpacity style={{
}}
onPress={() => onLoginFinished => {
(error, result) => {
if (error) {
// this.setState({ showHideActivity: 0 });
alert("login has error: " + result.error);
} else if (result.isCancelled) {
// alert("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(data => {
let userName = data.userID;
AsyncStorage.setItem("userName", userName);
gUserName = data.userID.toString() + "@fb.com";
gPassword = data.userID.toString();
type = "facebook";
this.userRegistration(gUserName, gPassword, type);
});
}
};
}}
>
<View
style={{
backgroundColor: "#3b5a9a",
justifyContent: "center",
borderColor: "#3b5a9a",
borderWidth: 1,
height: p * 42,
width: "100%"
}}
>
<Image
style={{
position: "absolute",
height: p * 40,
width: p * 40,
zIndex: 1
}}
source={require("../assets/images/fb.png")}
/>
<Text style={styles.SocicalText}>
Sign In With Facebook
</Text>
</View>
<LoginButton
style={[
styles.fblogin,
{
width: this.state.viewHeight,
opacity: 0.02,
height: "100%",
position: "absolute"
}
]}
publishPermissions={["publish_actions"]}
onLoginFinished={(error, result) => {
if (error) {
// alert("login has error: " + result.error);
} else if (result.isCancelled) {
// alert("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(data => {
gUserName = data.userID.toString() + "@fb.com";
gPassword = data.userID.toString();
type = "facebook";
AsyncStorage.setItem('userName', 'Hi There')
this.userRegistration(gUserName, gPassword, type);
//this.props.navigation.navigate("Deshboard");
});
}
}}
onLogoutFinished={() => alert("logout.")}
/>
</TouchableOpacity>
</View>
<View style={{ marginTop: p * 15 }}>
<TouchableOpacity onPress={() => this.handleSigninGoogle()}>
<View
style={{
backgroundColor: "#328CDC",
justifyContent: "center",
height: p * 42,
width: "100%",
borderColor: "#328CDC",
borderWidth: 1
}}
>
<Image
style={{
position: "absolute",
height: p * 40,
width: p * 40
}}
source={require("../assets/images/gl.jpg")}
/>
<Text style={styles.SocicalText}>
{" "}
Sign In With Google
</Text>
</View>
</TouchableOpacity>
</View>
<View
style={{
borderBottomColor: "#ccc",
borderBottomWidth: 1,
marginTop: p*40,
alignItems: "center"
}}
>
<View
style={{
position: "absolute",
backgroundColor: "#fff",
top:p* -8,
zIndex: 99
}}
>
<Text
style={{
backgroundColor: "#fff",
color: "#666",
paddingLeft:p* 10,
paddingRight:p* 10
}}
>
OR
</Text>
</View>
</View>
</View>
</View>
<View
style={{
marginTop:p* 20
//borderColor:'#000',borderWidth:2
}}
>
<TouchableOpacity onPress={() => this.ShowHideSection()}>
<View
style={{
backgroundColor: "#fff",
zIndex: 99,
flex: 1,
alignItems: "center",
justifyContent: "center",
marginBottom: 10,
display: this.state.displayOption
}}
>
<Text
style={{
backgroundColor: "#fff",
color: "#666",
paddingLeft:p* 10,
paddingRight: p*10
}}
>
Connect With
</Text>
<Icon onPress={() => this.ShowHideSection()}
name="chevron-small-down"
size={p*30}
color="#000"
style={{ flex: 1, position: "absolute", top:p* 10 }}
/>
</View>
</TouchableOpacity>
<View
style={[
styles.inputBox,
{ display: this.state.EmaildisplayOption }
]}
>
<View
style={{
width: "10%",
justifyContent: "center",
alignItems: "center",
marginRight: 10
// borderColor:'#000',borderWidth:1
}}
>
<Image
style={{
marginTop: 1,
resizeMode: "contain",
height: "80%",
width: "80%"
}}
source={require("../assets/images/userIcon.png")}
/>
</View>
<View style={styles.textInputBox}>
<TouchableOpacity onPress={() => this.ScrollViewForEmail()}>
<TextInput
style={styles.textInput}
autoCapitalize="none"
checkValid={text => this.mytest(text)}
pointerEvents="none"
onChangeText={userMail => this.setState({ userMail })}
value={this.state.userMail}
underlineColorAndroid="transparent"
placeholder={"Email"}
editable={false}
/>
</TouchableOpacity>
</View>
</View>
<View style={{ display: this.state.displayOption }}>
<View style={styles.inputBox}>
<View
style={{
width: "10%",
justifyContent: "center",
alignItems: "center",
marginRight: 10
// borderColor:'#000',borderWidth:1
}}
>
<Image
style={{
marginTop: 1,
resizeMode: "contain",
height: "80%",
width: "80%"
}}
source={require("../assets/images/userIcon.png")}
/>
</View>
<View style={styles.textInputBox}>
<TextInput
style={styles.textInput}
autoCapitalize="none"
maxLength={25}
checkValid={text => this.mytest(text)}
onChangeText={userMail => this.setState({ userMail })}
value={this.state.userMail}
underlineColorAndroid="transparent"
placeholder={"Email"}
/>
</View>
</View>
<View style={styles.inputBox}>
<View
style={{
width: "10%",
justifyContent: "center",
alignItems: "center",
marginRight: 10
// borderColor:'#000',borderWidth:1
}}
>
<Image
style={{
marginTop: 1,
resizeMode: "contain",
height: "70%",
width: "70%"
}}
source={require("../assets/images/passwordIcon.png")}
/>
</View>
<View style={styles.passwordInputBox}>
<TextInput
maxLength={20}
style={styles.textInput}
placeholder={"Password"}
onChangeText={userPassword =>
this.setState({ userPassword })
}
value={this.state.userPassword}
secureTextEntry={this.state.hidePassword}
/>
<TouchableOpacity
activeOpacity={0.8}
style={styles.visibilityBtn}
onPress={this.managePasswordVisibility}
>
<Image
source={
this.state.hidePassword
? require("../assets/images/hideImage.png")
: require("../assets/images/showImage.png")
}
style={styles.btnImage}
/>
</TouchableOpacity>
</View>
</View>
<TouchableOpacity onPress={() => this.getStartButton0()}>
<View style={styles.forgetPassword}>
<Text style={styles.forgetPasswordText}>
Forgot your password?
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.getStartButton()}>
<View style={styles.singnInButton}>
<Text style={styles.singnInText}>Log In</Text>
</View>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</View>
我要这样做,因为当我单击电子邮件TextInput时,将打开一个弹出动画,其中包含登录按钮,用于显示电子邮件和密码。我附上gif,以便您更好地理解。