react-native - React Native Paper 中的“JSON.stringify 无法序列化循环结构”问题

Question

我只是使用react-native-paper的新手，我尝试在 TextInput 组件的右侧应用一个图标，但我遇到了一个令人困惑的问题：“JSON.stringify 无法序列化循环结构”这是我的代码：

应用程序.js

import { StatusBar } from 'expo-status-bar';
import React , {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {AppLoading} from "expo";
import * as Font from 'expo-font'
import UniversitiesStackNavigator from './Navigation/universitiesStackNavigator';
import UniversitiesTabNavigator from "./Navigation/UniversitiesTabNavigator";
import {FacultiesStackNavigator , MainDrawer} from "./Navigation/mainNavigator";
import { Provider } from 'react-redux';
import { Provider as PaperProvider } from 'react-native-paper';
import {LoginScreen} from "./screens/LoginSignUpStack/LoginScreen";

import { ConfigureStore } from './redux/configureStore';

const store = ConfigureStore();

class App extends Component{
  constructor(props) {
      super(props);
      this.state={
          fontFetched : false
      }
  }
  fetchFont =()=>{
      console.log('downloading the fonts ....');
      return Font.loadAsync({
          'Castoro' : require('./assets/fonts/Castoro-Regular.ttf')
      });
  };
  render(){
    if(this.state.fontFetched)
        return (
            <PaperProvider>
                <LoginScreen/>
            </PaperProvider>

        );
    else {
        return (
            <AppLoading startAsync={this.fetchFont} onFinish={()=>{this.setState({...this.state , fontFetched : true}); console.log('the fonts are downloaded !') }} />
        )
    }

  }
}

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

登录屏幕.js

import React , {Component} from "react";
import {TextInput} from "react-native-paper"
import {StyleSheet, View} from "react-native";
import {Icon} from "react-native-elements";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"


export class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state={
            userName : "",
            password: ""
        }
    }
    render(){
        return(
            <View style={styles.container}>
                <TextInput
                    label="User Name"
                    underlineColor="gold"
                    placeholder="Enter your user name ..."
                    value={this.state.userName}
                    onChangeText={text=>{this.setState({userName : text})}}
                />
                <TextInput
                    label="Password"
                    underlineColor="gold"
                    placeholder="Enter your password"
                    value={this.state.password}
                    onChangeText={text=>{this.setState({password : text})}}
                    secureTextEntry={true}
                    right={
                        <TextInput.Icon
                            name={()=><MaterialCommunityIcons name={"security"}/>}
                        />
                    }
                />
            </View>

        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex : 1,
        justifyContent : "center"
    },
});

我试图复制粘贴在这些论坛中编写的几行代码，但我总是陷入同样的​​错误

这是我的 package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/inter": "^0.1.0",
    "@expo/vector-icons": "^10.2.1",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.2",
    "@react-navigation/drawer": "^5.12.4",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "expo": "^39.0.5",
    "expo-constants": "~9.2.0",
    "expo-document-picker": "~8.4.0",
    "expo-file-system": "~9.2.0",
    "expo-font": "~8.3.0",
    "expo-status-bar": "~1.0.2",
    "expo-web-browser": "~8.5.0",
    "formik": "^2.2.5",
    "global": "^4.4.0",
    "lottie-react-native": "~2.6.1",
    "native-base": "^2.13.14",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-elements": "^3.0.0-alpha.1",
    "react-native-flash-message": "^0.1.17",
    "react-native-form4u": "^0.0.3",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-modals": "^0.19.9",
    "react-native-navigation": "^7.4.0",
    "react-native-paper": "^3.0.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-vector-icons": "^7.1.0",
    "react-native-view-pdf": "^0.11.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "10.7.0",
    "react-navigation": "^4.4.3",
    "react-navigation-material-bottom-tabs": "^2.3.3",
    "react-navigation-stack": "^2.10.2",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "rn-pdf-reader-js": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

标签： react-nativereact-native-paper