TypeError: undefined is not an object on react native app

Question

我的 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'
  }
});

Answer 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'
  }
});