React Native 某些样式导致视图无法呈现

Posted 2023-02-21

【中文标题】React Native 某些样式导致视图无法呈现

【英文标题】：React Native some style causes view to not render

【发布时间】：2016-10-05 15:23:55

【问题描述】：

嗨，我是 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 样式为空，它就可以工作，如果我在其中添加任何内容，视图根本不会呈现。

【参考方案1】：

默认文本颜色为黑色，rowContainers backgroundColor 设置为“#000”。所以它看起来没有被渲染。