Реагируйте на собственную навигацию Redux-Form - PullRequest
Новая
       39

Реагируйте на собственную навигацию Redux-Form

0 голосов
/ 05 марта 2019

Я создал страницу с избыточной формой. 

const required = value => value ? undefined : 'Required';
const maxLength15 = value => value && value.length > 15 ? `Must be 15 characters or less` : undefined;
const number = value => value && isNaN(Number(value)) ? 'Must be a number' : undefined;
const minValue = min => value =>
    value && value < min ? `Must be at least ${min}` : undefined;
const minValue18 = minValue(18);
const isValidEmail = value =>
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? 'Invalid email address' : undefined;

const renderField = ({ keyboardType, meta: { touched, error, warning }, input: { onChange, ...restInput }}) => {
    return (

        <View>
        <Icon style={styles.inputIcon} name={'ios-person'} size={28} color={'rgba(255,255,255,0.7)'}/>

        <TextInput style={styles.input} keyboardType={keyboardType} textContentType='telephoneNumber'  placeholderTextColor{'rgba(255,255,255,0.7)'} 
          underlineColorAndroid='transparent' onChangeText={onChange} {...restInput}/>
        {touched && ((error && <Text style={{ color: 'red',left:'20%' }}>{error}</Text>) ||
                (warning && <Text style={{ color: 'orange' }}>{warning}</Text>))}
    </View>);
};

const ContactComponent = props => {
    return (
      <KeyboardAwareScrollView enableOnAndroid={true} contentContainerStyle={{flexGrow: 1}} >
      <ImageBackground source={bgImage} style={styles.backgroundContainer}>
        <View style={styles.logoContainer}>
        <Image source={logo} style={styles.logo}/>
        <Text style={styles.textTitle}>Title Text</Text>
        <Text style={styles.textDescription}> Description Text</Text>
        </View>
        <View style={{top:'10%'}}>

        <Field name="username" keyboardType="default" component={renderField} 
                validate={[required, maxLength15]} />
        <View style={{top:'5%'}}>
        <Field name="email" keyboardType="email-address" component={renderField} 
                validate={[required,isValidEmail]} />
        </View>

      </View>
      <TouchableOpacity style={styles.btnLogin} onPress={()=>{
          dispatch(NavigationActions.navigate({ routeName: 'ProfilePages' }));
      }}>
      <Text style={styles.textBtn}>Sign In</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.btnSignup} onPress={()=>{
          dispatch(NavigationActions.navigate({ routeName: 'SignUpPages' }));
      }}>
            <Text style={styles.textBtn}>Sign Up</Text>
      </TouchableOpacity>
      </ImageBackground>
      </KeyboardAwareScrollView>

    );
}

Я использовал следующую функцию для переключения между страницами, когда создавал эту страницу без приведения формы 

 render() {

    const {navigation}=this.props;

    return (



<TouchableOpacity style={styles.btnLogin} onPress={()=>{
          navigation.navigate('ProfilePages')
      }}>
      <Text style={styles.textBtn}>Sign In</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.btnSignup}  onPress={()=>{
          navigation.navigate('SignUpPages')
      }}>
            <Text style={styles.textBtn}>Sign Up</Text>
      </TouchableOpacity>

Но избыточная форма не работала, потому что я не мог получить доступ к свойству this.props, когда проектировал его. В конце моего исследования я обнаружил, что свойство this.props может быть достигнуто с помощью render (), но у моей избыточной формы нет свойства render () на моей странице. Я попробовал следующий способ сделать это с избыточной формой, и я не получил никаких результатов. 

 <TouchableOpacity style={styles.btnLogin} onPress={()=>{
          dispatch(NavigationActions.navigate({ routeName: 'ProfilePages' }));
      }}>
      <Text style={styles.textBtn}>Sign In</Text>
      </TouchableOpacity>

Как я могу перенаправить это перенаправление в redux-форму с реагированием-навигацией?

...