Блог

приведенный ниже код моего приложения react native должен отображать простое фоновое изображение, которое я использую в приведенном ниже коде (я использую css и js), когда я запускаю код, я получаю следующую ошибку, она говорит мне, что параметр ширины не определен, хотя как это решить?

Ширина ошибки Реагирует Нативно:

 :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 (  lt;View style={style.container}gt;  lt;ImageBackground  source="../assets/images/backgroundhome.jpg"  style={style.imgBackground}  gt;  lt;SafeAreaViewgt;  lt;TextInput  style={style.textinput}  onChangeText={(text) =gt; {  this.setState({ username: text });  }}  value={this.state.username}  placeholder="insert username"  /gt;   lt;TextInput  style={style.textinput}  onChangeText={(text) =gt; {  this.setState({ password: text });  }}  value={this.state.password}  placeholder="insert password"  /gt;  lt;Button title="Login" onPress={() =gt; this.login()} /gt;  lt;Button  title="Register to fit"  onPress={() =gt; this.gotoregister()}  /gt;  lt;/SafeAreaViewgt;  lt;/ImageBackgroundgt;  lt;/Viewgt;  );  } }  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'  } });  

стиль.контейнер не определен. Попробуйте объединить стили в 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'  } });