Question

您好，我是本机反应新手，我正在从事该项目，这是我正在从事的项目的“登录/注册”页面enter image description here 通过博览会在物理设备上运行它。我尝试了堆栈溢出时可用的其他选项，但它们至少对我没有作用

***App.js***
import React from 'react'
import{StyleSheet,Text,View}from 'react-native'
import RegForm from './app/Components/RegForm' 
export default class App extends React.Component{
  render(){
    return(
      <View style={Styles.Container}>
        <RegForm />
      </View>
    )
  }
}
const styles=StyleSheet.Create({
  container:{
    flex:1 ,
    justifyContent:'center',
    backgroundColor:'#36485f' ,
    paddingLeft:60 ,
    paddingRight:60 ,
  },
})

这是应用程序注册页面的代码

***RegForm***
import React from 'react'
import{StyleSheet,Text,View,TextInput,TouchableOpacity}from 'react-native'

export default class RegForm extends React.Component{
  render(){
    return(
      <View style={Styles.RegForm}>
        <Text style={styles.header}>Registration</Text>
        <TextInput style={styles.TextInput} placeholder="Please Enter your Name" />
        <TextInput style={styles.TextInput} placeholder="Please Enter your Email" />
        <TextInput style={styles.TextInput} placeholder="Please Enter your Password"
        secureTextEntry={true} />
        <TextInput style={styles.TextInput} placeholder="Please Enter your Mobile No" />
        <TextInput style={styles.TextInput} placeholder="Please Enter your CNIC" />
        <TouchableOpacity style={styles.button}>
        <Text style={styles.btntext}>Sign Up</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
const styles=StyleSheet.Create({
  RegForm:{
    alignSelf:'strech' ,
  },
  header:{
fontSize:24 ,
color:'#fff',
paddingBottom:10 ,
marginBottom:40 ,
borderBottomColor:'#199187',
borderBottomWidth:'1',
  },
  TextInput:{
      alignSelf:'strech',
      height:40 ,
      marginBottom:30 ,
      color:'#fff' ,
      borderBottomColor:'#f8f8f8',
      borderBottomWidth:1 ,
  },
  button:{
      alignSelf:'strech',
      alignItem:'center',
      padding:20 ,
      backgroundColor:'#59cbbd',
      marginTop:30 ,
  },
  btntext:{
      color:'#fff',
      fontWeight:'bold',
  }
})

Answer 1

请检查您的代码

***App.js***
import React from 'react'
import{StyleSheet,Text,View}from 'react-native'
import RegForm from './app/Components/RegForm' 
export default class App extends React.Component{
  render(){
    return(
      <View style={styles.Container}>
        <RegForm />
      </View>
    )
  }
}
const styles=StyleSheet.Create({
  container:{
    flex:1 ,
    justifyContent:'center',
    backgroundColor:'#36485f' ,
    paddingLeft:60 ,
    paddingRight:60 ,
  },
})

您在

中使用的是“样式”而不是“样式”

 <View style={Styles.RegForm}>

尝试删除node_modules和package-lock.js并清除npm缓存和expo缓存，然后再次启动应用程序，

npm缓存清理--force

博览会开始-清除

开发服务器返回的错误代码：500（React Native）

1 个答案: