앱을 개발하는 동안 위에서 설명한 오류가 발생할 수 있습니다. 다음은 오류를 제공하는 코드입니다 -
예시
import React from "react"; import { Image , Text, View, StyleSheet } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Image style={styles.stretch} source={{ uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png ', }} /> </View> ); } } const styles = StyleSheet.create({ container: { paddingTop: 50, paddingLeft: 50, }, stretch: { width: 200, height: 200, resizeMode: 'stretch', }, });
화면에 표시되는 오류는 다음과 같습니다 -
오류는 다음과 같은 이유로 발생합니다. 앱에서 코딩하는 동안 이러한 실수를 피하십시오.
오류의 첫 번째 원인은 잘못된 들여쓰기 때문입니다. 각 구성 요소를 적절하게 들여쓰기하는 것이 매우 필요합니다. 자식 요소는 부모 구성 요소 내에서 제대로 들여쓰기됩니다.
두 번째 경우는 각 구성 요소의 끝에 공백이 남아 있기 때문입니다. 화면 끝에서 공백을 제거하고 다시 컴파일하십시오. 그것은 잘 작동합니다. 다른 소스의 코드를 복사하여 붙여넣을 때 주의하시기 바랍니다. 대부분의 경우 이 오류가 발생합니다.
이제 코드를 수정하고 출력을 다시 확인하겠습니다.
예시
import React from "react"; import { Image , Text, View, StyleSheet } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Image style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png '}} /> </View> ); } } const styles = StyleSheet.create({ container: { paddingTop: 50, paddingLeft: 50, }, stretch: { width: 200, height: 200, resizeMode: 'stretch', } });
출력