reactjs - Android中的上滑动画问题 - React Native

Question

我正在尝试在 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，以便您更好地理解。

标签： reactjsreact-nativereact-native-android