withNavigation只能在视图层次结构上使用-使用FluidNavigation而不是createStackNavigation时出错

时间：2018-09-12 14:39:24

标签： react-native graphql apollo

今天早晨，当我尝试使用react-native-fluid-transitions在场景之间实现流体导航时，我遇到了这个问题。将createStackNavigator或createFluidNavigator替换为FluidNavigator后，出现以下屏幕问题：

enter image description here

这是我的文件

index.js 

 import React from 'react';
    import { Platform } from 'react-native';
    import {
    SafeAreaView,
    createStackNavigator,
} from 'react-navigation';
import screens from '../screens';
import AppDrawer, {
  contentOptions as appDrawerContentOptions,
} from '../components/AppDrawer';
import { createFluidNavigator, FluidNavigator } from 'react-navigation-fluid-transitions';

// We already have a status bar from expo
if (Platform.OS === 'android') {
  SafeAreaView.setStatusBarHeight(0);
}

const defaultStack = createFluidNavigator (
  {
    Home: {
      screen: screens.CpfCheckScreen
    },
    Login: {
      screen: screens.LoginScreen
    },
    SelectAssociate: {
      screen: screens.SelectAssociateScreen
    },
    EmailRegister: {
      screen: screens.EmailRegisterScreen
    },
    AssociateSelected: {
      screen: screens.AssociatedSelectedScreen
    },
    Welcome: {
      screen: screens.WelcomeScreen
    },
    Survey: {
      screen: screens.SurveyScreen
    },
    WaitingIndication: {
      screen: screens.WaitingIndicationScreen
    },
    BindingSuccess: {
      screen: screens.BindingSuccessScreen
    },
    AuthenticationSteps: {
      screen: screens.AuthenticationStepsScreen
    },
    ProcessingData: {
      screen: screens.ProcessingDataScreen
    },
    SignaturePicture: {
      screen: screens.SignaturePictureScreen
    },
    // CpfPicture: {
    //   screen: screens.CpfPictureScreen
    // },
    ConfirmData: {
      screen: screens.ConfirmDataScreen
    },
    DataValidation: {
      screen: screens.DataValidationScreen
    },
    MembershipTerms: {
      screen: screens.MembershipTermsScreen
    },
    SuccessfullRegistration: {
      screen: screens.SuccessfullRegistrationScreen
    },
    ApprovedRegistration: {
      screen: screens.ApprovedRegistrationScreen
    },
    FailedRegistration: {
      screen: screens.FailedRegistrationScreen
    },
    SecurityQuestion:
    {
      screen: screens.SecurityQuestionScreen
    },
    AssociatedLoginScreen: {
      screen: screens.AssociatedLoginScreen
    },
    NewAssociateQuizScreen: {
      screen: screens.NewAssociateQuizScreen
    },
    NewAssociateSuccessScreen: {
      screen: screens.NewAssociateSuccessScreen
    }
  },

  {
    initialRouteName: 'AssociatedLoginScreen',
    headerMode: 'none',
  }
)

导出默认defaultStack;

screens.js 

import InitializeScreen from './InitializeScreen';
import LoginScreen from './LoginScreen';
import EmailRegisterScreen from './EmailRegisterScreen';
import CpfCheckScreen from './CpfCheckScreen'
import SelectAssociateScreen from './SelectAssociateScreen'
import AssociatedSelectedScreen from './AssociatedSelectedScreen'
import WelcomeScreen from './WelcomeScreen'
import SurveyScreen from './SurveyScreen'
import WaitingIndicationScreen from './WaitingIndicationScreen'
import BindingSuccessScreen from './BindingSuccessScreen'
import AuthenticationStepsScreen from './AuthenticationStepsScreen'
import SignaturePictureScreen from './SignaturePictureScreen'
import ConfirmDataScreen from './ConfirmDataScreen'
// import RgPictureScreen from './RgPictureScreen'
// import CpfPictureScreen from './CpfPictureScreen'
import ProcessingDataScreen from './ProcessingDataScreen'
import DataValidationScreen from './DataValidationScreen'
import MembershipTermsScreen from './MembershipTermsScreen'
import SuccessfullRegistrationScreen from './SuccessfullRegistrationScreen'
import ApprovedRegistrationScreen from './ApprovedRegistrationScreen'
import FailedRegistrationScreen from './FailedRegistrationScreen'
import SecurityQuestionScreen from './SecurityQuestionScreen'

import AssociatedLoginScreen from './AssociatedLoginScreen'
import NewAssociateQuizScreen from './NewAssociateQuizScreen'
import NewAssociateSuccessScreen from './NewAssociateSuccessScreen'

/*
import ModalScreen from './ModalScreen';
import DetailsRegisterScreen from './DetailsRegisterScreen';
import DashboardScreen from './DashboardScreen';
import TaskDetailsScreen from './TaskDetailsScreen';
import TasksScreen from './TasksScreen';
import EventScreen from './EventScreen';
import TaskStepsScreen from './TaskStepsScreen';
import QRScanScreen from './QRScanScreen';
import TaskSuccessScreen from './TaskSuccessScreen';
import LogoutScreen from './LogoutScreen';
import ProductScreen from './ProductScreen';
import ProductQRScanScreen from './ProductQRScanScreen';
import ProductSuccessScreen from './ProductSuccessScreen';
import ContinueAsScreen from './ContinueAsScreen';
import UserProfileScreen from './UserProfileScreen';
import SocialPageLikeTaskScreen from './SocialPageLikeTaskScreen';
*/

export default {
  InitializeScreen,
  LoginScreen,
  EmailRegisterScreen,
  CpfCheckScreen,
  SelectAssociateScreen,
  AssociatedSelectedScreen,
  WelcomeScreen,
  SurveyScreen,
  WaitingIndicationScreen,
  BindingSuccessScreen,
  AuthenticationStepsScreen,
  SignaturePictureScreen,
  // RgPictureScreen,
  // CpfPictureScreen,
  ConfirmDataScreen,
  ProcessingDataScreen,
  DataValidationScreen,
  MembershipTermsScreen,
  SuccessfullRegistrationScreen,
  ApprovedRegistrationScreen,
  FailedRegistrationScreen,
  SecurityQuestionScreen,
  AssociatedLoginScreen,
  NewAssociateQuizScreen,
  NewAssociateSuccessScreen
  /*
  ModalScreen,
  DetailsRegisterScreen,
  DashboardScreen,
  TaskDetailsScreen,
  TasksScreen,
  EventScreen,
  TaskStepsScreen,
  QRScanScreen,
  TaskSuccessScreen,
  LogoutScreen,
  ProductScreen,
  ProductQRScanScreen,
  ProductSuccessScreen,
  ContinueAsScreen,
  UserProfileScreen,
  SocialPageLikeTaskScreen,*/
};

NewAssociateQuizForm 

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Text } from 'native-base';
import { withFormik } from 'formik';
import { withNavigation } from 'react-navigation';
import yup from 'yup';
import { withApollo } from 'react-apollo';
import Auth from '../lib/auth';
import Button from './Button';

import colors from '../config/colors';
import { moderateScale } from '../config/scaling';

import { Transition } from 'react-navigation-fluid-transitions'
import Carousel, { Pagination } from 'react-native-snap-carousel';

import FormField from './FormField';
import ItemInput from './ItemInput';
import AlertContainer from './AlertContainer';

const enhancer = withFormik({
  validationSchema: yup.object().shape({
    name: yup
      .string()
      .required('Este campo é obrigatório'),

  }),
  mapPropsToValues: props => ({
    associate: '',
  }),
  handleSubmit: (values, { props: { client, navigation }, setSubmitting }) => {
    const { associate } = values;
    console.log('handling submit')
    if (!associate ) {
      AlertContainer.show({
        message: 'Sócio inexistente',
        buttonText: 'Tentar novamente',
      });
      setSubmitting(false);
      return;
    }

    Auth.loginRequest(associate)
      .then(res => {
        if (!res || !res.data || !res.data.token) {
          // We can't tell much to the user
          console.log('not working')
          AlertContainer.show({
            message: 'Erro interno',
            buttonText: 'Tentar novamente',
          });
          return;
        }
        const { token } = res.data;
        console.log('working')
        Auth.login(token, client).then(() => navigation.navigate('App'));
      })
      .catch(error => {
        console.log('error on login request', error);
        const { response } = error;
        if (response) {
          // HTTP Request response
          const { status } = response;
          let message = 'Erro interno';
          if (status === 400) {
            message = 'Dados inválidos';
          }
          if (status === 401) {
            message = 'Sócio inválido';
          }
          AlertContainer.show({
            message,
            buttonText: 'Tentar novamente',
          });
        } else {
          // Raw error message
          const errorString = error.toString();
          if (errorString && errorString.indexOf('Network Error') >= 0) {
            AlertContainer.show({
              message: 'Erro de conexão',
              buttonText: 'Tentar novamente',
            });
          }
        }
      })
      .finally(() => setSubmitting(false));
  },
});

const AssociateForm = props => {
  const {
    values,
    touched,
    errors,
    handleSubmit,
    setFieldValue,
    setFieldTouched,
    navigation,
    isSubmitting,
  } = props;

  const renderItem = () => {
    return (
      <FormField
          validateStatus={getValidateStatus('associate')}
          error={getError('associate')}
          >
            <ItemInput
              placeholder="Nome e sobrenome..."
              onChangeText={text => {
                setFieldValue('associate', text)
              }}
              onBlur={() => setFieldTouched('associate')}
              initialValue={values.associate}
              maxLength={32}
              />
        </FormField>
    )
}

const pagination = () => {
    return (
        <Pagination
          dotsLength={3}
          activeDotIndex={0}
          containerStyle={{ backgroundColor: 'transparent' }}
          dotStyle={{
              width: 10,
              height: 10,
              borderRadius: 5,
              marginHorizontal: 8,
              backgroundColor: '#a18037'
          }}
          inactiveDotStyle={{
              // Define styles for inactive dots here
          }}
          inactiveDotOpacity={0.4}
          inactiveDotScale={0.6}
        />
    );
}

  const getValidateStatus = param => {
    return errors[param] && touched[param]
      ? 'error'
      : touched[param]
        ? 'success'
        : '';
  };

  const getError = param => {
    return errors[param] && touched[param] ? errors[param] : '';
  };

    return (
      <View style={styles.container}>

        <Text style={styles.title}>
          Responda o questionário
        </Text>
        <Text style={styles.subtitle}>
          {`Para ser um sócio Fiduc você precisa responder a este questionário e entraremos em contato para uma entrevista`}
        </Text>

        <View>
          { renderItem() }
          { pagination() }
        </View>

        <Button
            primary
            style={styles.submitButton}
            onPress={ () => { navigation.navigate('NewAssociateSuccessScreen') }}
            disabled={isSubmitting}
            loading={isSubmitting}
            >
            <Text
              style={[
                styles.submitButtonText,
                isSubmitting && { color: colors.secondary_text },
              ]}
              uppercase={false}
              >
              Receber Indicação
            </Text>
        </Button>

      </View>
    );
  };

export default withNavigation(withApollo(enhancer(AssociateForm)));

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  submitButton: {
    height: moderateScale(20),
    borderRadius: 0,
    justifyContent: 'center',
    marginTop: moderateScale(50),
    paddingHorizontal: 48,
    alignSelf: 'center',
  },
  submitButtonText: {
    color: colors.button_text,
    fontSize: moderateScale(18),
    textAlign: 'center',
    alignSelf: 'center',
  },
  whiteText: {
    color: colors.secondary_text,
  },
title: {
  color: colors.text,
  fontSize: moderateScale(23),
  textAlign: 'center',
  marginBottom: 8
},
subtitle: {
  color: colors.text,
  fontSize: moderateScale(12),
  textAlign: 'justify',
  marginBottom: 30
},
description: {
  color: colors.secondary_text,
  fontSize: moderateScale(16),
  textAlign: 'center',
  paddingVertical: moderateScale(10),
},
wrapper: {

}
});

package.json 

{
  "name": "fidelidade-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "eslint": "^4.19.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-config-universe": "git+https://git@github.com/expo/eslint-config-universe",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-flowtype": "^2.46.3",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-react": "^7.8.2",
    "jest-expo": "26.0.0",
    "prettier": "^1.12.1",
    "react-native-scripts": "1.13.2",
    "react-test-renderer": "16.3.0-alpha.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest",
    "postinstall": "patch -p0 < apollo.patch || true",
    "lint": "eslint ."
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "apollo-boost": "^0.1.4",
    "axios": "^0.18.0",
    "expo": "^27.0.0",
    "formik": "^0.11.11",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.1",
    "moment-timezone": "^0.5.17",
    "native-base": "^2.4.2",
    "react": "16.3.1",
    "react-apollo": "^2.1.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
    "react-native-datepicker": "^1.7.2",
    "react-native-easy-grid": "^0.1.17",
    "react-native-gesture-password": "^0.3.4",
    "react-native-maps-directions": "^1.6.0",
    "react-native-masked-text": "^1.7.2",
    "react-native-modal": "^6.1.0",
    "react-native-scrollable-tab-view": "^0.8.0",
    "react-native-snap-carousel": "^3.7.3",
    "react-native-svg": "^6.5.2",
    "react-native-swiper": "^1.5.13",
    "react-navigation": "^2.0.1",
    "react-navigation-fluid-transitions": "^0.2.6",
    "yup": "^0.24.1"
  }
}

0 个答案:

没有答案
相关问题
最新问题