访问 StyleSheet 的 .content 时应用程序崩溃答案

【问题标题】：Application crashes when accessing .content of StyleSheet访问 StyleSheet 的 .content 时应用程序崩溃
【发布时间】：2017-10-04 10:45:28
【问题描述】：

我有以下 React Native 组件：

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

export default class ListItem extends React.Component {

render() {
    return (
        <View style={itemStyle.content}>
            <Image
              style={imageStyle.content}
              source={this.props.someSource}
            />
        </View>
    );
}
}


var imageStyle = StyleSheet.create({
    content:{
        flexDirection:'column',
        alignItems:'center',
        alignSelf: 'flex-end',
        justifyContent:'center',
        backgroundColor: '#7CFC00',//light green
        width: '95%',
        height: '80%',
        resizeMode: 'contain',
        marginRight: '14%'
    }
});


var itemStyle = StyleSheet.create({
  content:{
    flexDirection:'row',
    alignItems:'center',
    alignSelf: 'center',
    alignContent: 'center',
    justifyContent:'center',
    marginRight: '70%'
  }
});

使用此代码，我的示例应用程序崩溃并显示消息 AwesomeProject has stopped。

如果我将<View style={itemStyle.content}> 更改为<View style={itemStyle}>，它就不会再崩溃了。

所以我很困惑。为什么Image 我可以使用.content，但对于View，如果我使用.content，应用程序会崩溃？

编辑：

Android 监视器显示：Abort message: 'availableWidth is indefinite so widthMeasureMode must be YGMeasureModeUndefined'。

【问题讨论】：

你试过没有StyleSheet.create吗？我个人这样写我的风格const styles = { ... }
你在View上使用itemStyle.content，应该是imageStyle.content，或者你需要创建一个itemStyle对象
@Raymond 我现在改成那个了。情况完全一样。
@LGSon 抱歉，我不小心复制了另一个样式表。我现在更新了我的问题。
你用的是什么版本的 RN？

标签： css react-native flexbox

【解决方案1】：

我最近遇到了这个问题，并为此苦苦挣扎。当您在 '%' 中指定边距值时，会发生此问题。删除 % 值，问题应该会解决

【讨论】：