TypeError: undefined is not an object on react native app

Posted 2023-02-16

【中文标题】TypeError: undefined is not an object on react native app

【英文标题】：

【发布时间】：2022-01-12 17:35:31

【问题描述】：

我的 react native 应用程序下面的代码需要显示一个简单的背景图像来执行我在下面的代码中使用的操作（我使用 css 和 js），当我运行代码时出现以下错误，它告诉我宽度参数未定义，但我该如何解决？

React Native 的错误宽度：

    :19 in handleException
    at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
    at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
    at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
    at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication
    
    TypeError: undefined is not an object (evaluating 'style.width')
    
    This error is located at: 
TypeError: undefined is not an object (evaluating 'style.width')

This error is located at:
    in NavigationContainer (at Router.js:101)
    in App (at Router.js:127)
    in Router (at App.js:8)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

反应代码：

/* eslint-disable class-methods-use-this */
/* eslint-disable global-require */
/* eslint-disable react/destructuring-assignment */
import * as React from 'react';
import 
  SafeAreaView,
  ImageBackground,
  Button,
  TextInput,
  View
 from 'react-native';
import  Actions  from 'react-native-router-flux';
import  login  from '../services/user';
import * as style from './style/design';

class Login extends React.Component 
  constructor() 
    super();

    this.state = 
      username: '',
      password: ''
    ;
  

  async login() 
    const ret = await login(this.state.username, this.state.password);
    if (ret === 'denied') 
      console.log(`Sono dentro con : $ret.toString()`);
     else 
      Actions.home();
    
  

  gotoregister() 
    Actions.register();
  

  render() 
    return (
      <View style=style.container>
        <ImageBackground
          source="../assets/images/backgroundhome.jpg"
          style=style.imgBackground
        >
          <SafeAreaView>
            <TextInput
              style=style.textinput
              onChangeText=(text) => 
                this.setState( username: text );
              
              value=this.state.username
              placeholder="insert username"
            />

            <TextInput
              style=style.textinput
              onChangeText=(text) => 
                this.setState( password: text );
              
              value=this.state.password
              placeholder="insert password"
            />
            <Button title="Login" onPress=() => this.login() />
            <Button
              title="Register to fit"
              onPress=() => this.gotoregister()
            />
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  


export default Login;

design.js 文件：

import  StyleSheet  from 'react-native';

export const styles = StyleSheet.create(
  container:  alignItems: 'center', flex: 1, justifyContent: 'center' 
);

export const style = StyleSheet.create(
  image: 
    height: 100,
    width: 260
  ,
  imgBackground: 
    flex: 1,
    height: '100%',
    width: '100%'
  ,
  textinput: 
    backgroundColor: '#FFFFFF',
    borderColor: '#D3D3D3',
    borderRadius: 20,
    borderWidth: 2,
    height: 50,
    marginTop: 10,
    textAlign: 'center'
  
);

【参考方案1】：

style.container 未定义。尝试合并 design.js 文件中的样式。

export const style = StyleSheet.create(
  container:  
    alignItems: 'center', 
    flex: 1, 
    justifyContent: 'center' 
  ,
  image: 
    height: 100,
    width: 260
  ,
  imgBackground: 
    flex: 1,
    height: '100%',
    width: '100%'
  ,
  textinput: 
    backgroundColor: '#FFFFFF',
    borderColor: '#D3D3D3',
    borderRadius: 20,
    borderWidth: 2,
    height: 50,
    marginTop: 10,
    textAlign: 'center'
  
);