Question

我设计了一个带有redux表单的页面。

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>

    );
}

当我设计此页面而不使用Redux表单时，我使用以下功能在页面之间进行切换

 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>

但是redux表单无法正常工作，因为在设计时无法访问this.props属性。在研究结束时，我发现可以在render（）下访问this.props属性，但是我的redux表单在页面上没有render（）属性。我尝试通过以下方式对redux表单执行此操作，但未得到任何结果。

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

如何通过react-navigation将此重定向重定向到redux-form？

反应本机Redux-Form导航

0 个答案: