Jestem w początkowej fazie tworzenia aplikacji natywnej do reagowania i na pierwszym ekranie chcę mieć niestandardowe pole tekstowe do wprowadzania danych.

W tej chwili kod na stronie zostanie załadowany, jeśli spróbuję umieścić zwykły komponent tekstowy przez reakcję natywną, ale kiedy używam niestandardowego komponentu wejściowego, który utworzyłem, wyświetla błąd, że istnieje niezmienne naruszenie.

Oto konfiguracja niestandardowego komponentu wejściowego:

import React from 'react'
import {View, Text, TextInput} from 'react-native'

const InputCustom = ({label, placeholder, onChangeText,secureTextEntry,error,
    inputStyle, labelStyle,containerStyle,errorStyle,textAlign}) => {
        return(
            <View style={containerStyle}>
            <Text style={labelStyle}>{label}</Text>
            <TextInput
            secureTextEntry={secureTextEntry}
            placeholder={placeholder}
            autoCorrect={false}
            style={inputStyle}
            value={value}
            textAlign={textAlign}
            onChangeText={onChangeText}
            />
            <Text style={errorStyle}>{error}</Text>
            </View>
        );
    };

    export {InputCustom};

Oto komponent niestandardowy używany w widoku niestandardowym

import React from 'react'
import View from 'react-native'
import InputCustom from '/Users/tmi/Documents/Mobile Applications/myproject/src/components/common/InputCustom.js'

const CreateAccountTextFields = (props) => {
    return(
            <View>
            <View>
                <InputCustom
                label ="First Name"
                placeholder="First Name"
                value={props.firstName}
                inputStyle ={props.inputStyle}
                containerStyle={props.containerStyle}
                labelStyle={props.labelStyle}
                textAlign={props.textAlign}
                onChangeText={props.fNameOnChange}
                
            />
            </View>
            </View>
    )
}

export default CreateAccountTextFields

Wreszcie, oto strona, która byłaby wyświetlana przez użytkownika, który zgłasza rzeczywisty błąd

import React, {Component} from 'react'
import ScrollView  from 'react-native'
import {CreateAccountTextFields} from '/Users/tmi/Documents/Mobile Applications/myproject/src/components/applaunch/signup/CreateAccountTextFields.js'
import SignUpTextFieldStyleStyles from '../../styles/SignUp/SignUpTextFieldStyle.styles'

// This is the Sign Up Page a User will see on their screen with all elements added to this screen 

class SignUpView extends Component {
    constructor(props){
        super(props)
        this.state={
            firstName: '',
        }
    }
    static navigationOptions = {
        title: 'The Test ',
        headerStyle: {backgroundColor: 'black'}, 
        headerTitleStyle: {color: 'white', fontFamily: 'Impact', fontSize: 30} ,
      };
      render(){
          return(
              <ScrollView>
                <CreateAccountTextFields
                firstName={"this.props.firstName"}
                inputStyle={SignUpTextFieldStyleStyles.shortInputStyle}
                containerStyle={SignUpTextFieldStyleStyles.shortInputContrainerStyle}
                labelStyle={SignUpTextFieldStyleStyles.shortInputLabelStyle}
                textAlign={SignUpTextFieldStyleStyles.inputTextAlign}
                errorStyle={SignUpTextFieldStyleStyles.error}
                />
            </ScrollView>
          )
      }
}
export default SignUpView
0
Ahmeeya Goldman 21 marzec 2020, 15:20

2 odpowiedzi

Najlepsza odpowiedź

Widzę kilka problemów z opublikowanym przez Ciebie kodem i podejrzewam, że nie opublikowałeś tutaj całego odpowiedniego kodu, np. importujesz style z miejsca, którego nie dostarczyłeś. Skopiowałem Twój kod do nowej aplikacji i debugowałem, dopóki nie otrzymałem niezmiennego naruszenia. Podejrzewam, że to ten sam, na który wpadasz.

W tym przypadku naruszenie jest spowodowane tym, że importujesz wartości domyślne z react-native, gdy chcesz importować określone komponenty.

import View from 'react-native' powinno być import { View } from 'react-native'

import ScrollView from 'react-native' powinno być import { ScrollView } from 'react-native'

Ponadto, jak wspomniano w innej odpowiedzi, należy wyeksportować komponenty niestandardowe za pomocą export default COMPONENT i zaimportować je za pomocą import COMPONENT from FILE. Zauważ, że w tym przypadku nie używamy {} do importowania komponentu.

Natrafiłem również na brakującą właściwość value w argumentach komponentu niestandardowego, jak wspomniano w innym komentarzu. Pełny kod mojej reprodukcji tutaj:

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SignUpView from "./components/SignUpView";

export default function App() {
  return (
    <View style={styles.container}>
      <SignUpView />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

InputCustom.js

import React from 'react'
import {View, Text, TextInput} from 'react-native'

const InputCustom = ({label, placeholder, onChangeText,secureTextEntry,error, inputStyle, labelStyle,containerStyle,errorStyle,textAlign, value}) => {
    return(
        <View style={containerStyle}>
            <Text style={labelStyle}>{label}</Text>
            <TextInput
                secureTextEntry={secureTextEntry}
                placeholder={placeholder}
                autoCorrect={false}
                style={inputStyle}
                value={value}
                textAlign={textAlign}
                onChangeText={onChangeText} />
            <Text style={errorStyle}>{error}</Text>
        </View>
    );
};

export default InputCustom;

CreateAccountTextFields.js

import React from 'react'
import { View } from 'react-native'
import InputCustom from './InputCustom.js'

const CreateAccountTextFields = (props) => {
    return (
        <View>
            <View>
                <InputCustom
                label ="First Name"
                placeholder="First Name"
                value={props.firstName}
                inputStyle ={props.inputStyle}
                containerStyle={props.containerStyle}
                labelStyle={props.labelStyle}
                textAlign={props.textAlign}
                onChangeText={props.fNameOnChange} />
            </View>
        </View>
    );
}

export default CreateAccountTextFields;

SignUpView.js

import React, {Component} from 'react'
import { ScrollView }  from 'react-native'
import CreateAccountTextFields from './CreateAccountTextFields.js'
import styles from '../styles/styles';

class SignUpView extends Component {
    constructor(props){
        super(props)
        this.state={
            firstName: '',
        }
    }

    render(){
        return(
            <ScrollView>
              <CreateAccountTextFields
              firstName={"this.props.firstName"}
              inputStyle={styles.shortInputStyle}
              containerStyle={styles.shortInputContrainerStyle}
              labelStyle={styles.shortInputLabelStyle}
              textAlign={styles.inputTextAlign}
              errorStyle={styles.error}
              />
          </ScrollView>
        )
    }
}
export default SignUpView;

styles.js

import React from 'react';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

});

export default styles;
0
Benjamin Godlove 21 marzec 2020, 18:58

W zależności od tego, jak korzystasz z importu, użyj

export default InputCustom;

Zamiast

export {InputCustom};
0
sivako 21 marzec 2020, 12:38