React 네이티브 일부 스타일로 인해 뷰가 렌더링되지 않습니다.

Question

안녕하세요 저는 React Native의 초보자이며 같은 것을 사용하여 Android 앱을 만들려고합니다. 내보기의 스타일을 변경하면 -> (backgroundColor 또는 borrderBottom) 그냥 렌더링되지 않습니다. 아무데도 오류가 없지만 js 번들을 다시로드하면 뷰와 모든 자식이 렌더링되지 않습니다. 이 특정 문제를 해결하는 것 이상으로, 나는 왜 이런 일이 일어나고 있는지, 또는 내가 뭔가를 놓치고 있는지 이해하는 데 더 관심이 있습니다. 위의 코드는 완벽하게 작동하고 모든 구성 요소의 렌더링

import React from 'react'; 
import { StyleSheet, View, Text, PixelRatio, TextInput } from 'react-native'; 

const styles = { 
    container: { 
    paddingTop: 70, 
    flex: 1, 
    justifyContent: 'flex-start', 
    alignItems: 'flex-start', 
    backgroundColor: '#fff', 
    }, 
    form: { 
    flex: 1, 
    flexDirection: 'column' 
    }, 
    rowContainer: { 
    //backgroundColor: '#000', 
    }, 
    row: { 
    flexDirection: 'row', 
    height: 44, 
    alignItems: 'center', 
    }, 
    inputLabel: { 
    fontSize: 15, 
    paddingLeft: 15, 
    color: '#333' 
    }, 
    textInputStyle: { 
    fontSize: 15, 
    flex: 1, 
    paddingLeft: 15 
    } 
}; 

export default function TestComponent(props) { 
    return (
    <View style={styles.container}> 
     <Text> Inside Container </Text> 
     <View style={styles.form}> 
     <Text> Inside Form </Text> 
     <View style={styles.rowContainer} > 
      <Text> Inside Row Container </Text> 
      <View style={styles.row}> 
      <Text numberOfLines={1} style={styles.inputLabel}> Bid On </Text> 
      <TextInput /> 
      </View> 
     </View> 
     </View> 
    </View> 
); 
} 

아래 전체에 내 구성 요소는 내가 rowContainer 스타일과 주석 backgroundColor, rowContainer 및 모든 아이들이 렌더링되지 않습니다을 변경하지만 경우입니다. 왜 이런 일이 일어나는지 전혀 모른다. 또한만큼 rowContainer 스타일은 내가 그 안에 아무것도를 추가하는 경우는, 작동 비어로, 뷰는 단순히 렌더링하지 않습니다

rowContainer: { 

    flex: 1, 
    flexDirection: 'column', 
    backgroundColor: '#000' 
    borderBottomWidth: 1, 
    borderColor: '#c8c7cc' 
    } 

같은 rowContainer 내부에 다른 스타일을 시도했다.

Answer 1

기본 텍스트 색은 검정색이며 rowContainers backgroundColor는 '# 000'으로 설정됩니다. 그래서 렌더링되지 않은 것처럼 보입니다.