Question

我一直试图将包含自定义输入组件的组件导入到我的配置文件屏幕中，我试图同时导入ProfTab.js（我的自定义textInput组件的容器）和FlexibleInput.js（自定义TextInput.js）分别进入我的profileScreen.js，以确保文件没有问题。我尝试删除该应用程序并重新启动该捆绑包，但似乎没有任何作用，但是我一直在抛出此错误。

无法加载错误的捆绑包（http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minigy=false）：（无法解析../Components/profScreenComp/FlexInput中的模块/Users/apple/Documents/Vscode/React-Native/Fluffy/src/Componensts/profScreenComp/ProfTabs.js：从{{1}中找不到模块../Components/profScreenComp/FlexInput }。

实际上，这些文件都不存在）

下面是我的profileScreen.js

/Users/apple/Documents/Vscode/React-Native/Fluffy/src/Components/profScreenComp/ProfTab.js

这是包含我的自定义TextInput组件的组件

    import React, { Component } from 'react';
import {View, Text, StyleSheet,Dimensions, ImageBackground,Button} from "react-native"
import Auth from "../Components/authComp/auth"
import ProfileTab from '../Components/profScreenComp/ProfTab'
// import FlexibleInput from '../Components/profScreenComp/flexInput'

import {connect} from 'react-redux'


const Width= Dimensions.get('window').width



 class ProfileScreen extends Component {
  static navigatorStyle = {
    navBarHidden: true,
    drawUnderNavBar: true,
    // navBarTranslucent: true
  };

  handleNavigation= ()=>{
    this.props.navigator.push({
      screen: "fluffy.ProfileInfoScreen",
      animated: true,
      animationType: "ease-in"
    })
  }
  render() {

    // let display= (<Auth/>)

    if(!this.props.auth){
      return(
        <Auth/>
      )
    }else{
      return (
        <View style={{flex: 1}}>

        <ImageBackground style={styles.background}>
        <View style= {styles.header}>
          <Text style={{color: "white", fontSize: 20,}}>PROFILE</Text>
        </View>

        <View style={styles.pointsBox}>
          </View>
        </ImageBackground>
        {/* <View style={styles.circle}><Text>M</Text></View> */}

          <View style= {styles.activity}>

          <View style={styles.tabsContainer}>
          <View style={styles.tabs}>
          <Text>Profile</Text>
          <Text>My Orders</Text>
          <Text>Support</Text>
          </View>
          </View>


          <View style={styles.body}>
         <ProfileTab/>
         {/* <FlexibleInput/> */}
          </View>

         </View> 

        </View>



      )
    }


  }
}

const styles= StyleSheet.create({
  header:{
    width: Width,
    height:50,
    alignItems: 'center',
    justifyContent: "center"
    ,backgroundColor: "#20265c",
    justifyContent: "flex-end",
    paddingBottom: 10,
  },


  background:{
    backgroundColor: "maroon",
    height: '50%',
    flex: 4,
    justifyContent:'space-between'

  },
  pointsBox:{
    height: 40,
    width: '60%',
    backgroundColor: "gray",
    borderRadius: 5,
    alignSelf: 'center',
  },
  // circle:{
  //   alignItems: 'center',
  //   justifyContent:"center",
  //   height: 100,
  //   width: 100,
  //   backgroundColor: "white",
  //   position: "absolute",
  //   borderRadius: 50,
  //   top: 240,
  //   left: 140,
  //   zIndex:2

  // },
  activity:{
    backgroundColor: "gray",
    flex: 6,
    // justifyContent: "center",
    // alignItems: 'center',
  },

tabs:{
    // marginTop: 10,
    // padding: 10,
    backgroundColor:'white',
    borderRadius: 50,
    height: '90%',
    width: '90%',
    flexDirection: 'row',
    justifyContent:'space-around',
    alignItems: 'center',

  },
  tabsContainer:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: 'orange'
  },
  body:{
    flex: 9,
    backgroundColor: 'beige'
  }

})

const mapStateToProps = state => {
  return{
    auth: state.auth.login
  }
}

export default connect(mapStateToProps)(ProfileScreen)

最后是我的自定义TextInput组件

import React, { Component } from 'react';
import { View, StyleSheet, ScrollView} from 'react-native';
import FlexibleInput from '../Components/profScreenComp/FlexInput'

 class profTab extends Component {

  render() {
    return (

      <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.content}>
      <FlexibleInput styles={styles.input} />
      </View>
      </ScrollView>

    );
  }
}

const styles= StyleSheet.create({
 container:{
     flex:1,
    margin: 10,
    padding: 10,
    justifyContent:'center',
    alignItems: 'center',
 },
 content:{
     height: '100%',
     width: '100%'
 },
 input:{
     borderColor: 'red',
 }
})

export default profTab

无法导入文件

0 个答案: