Question

我有以下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 Monitor会显示：Abort message: 'availableWidth is indefinite so widthMeasureMode must be YGMeasureModeUndefined'。

Answer 1

我最近面对这个问题，并为此付出了很多努力。当您以“％”给出边距值时，会发生此问题。删除％值，问题应该会解决

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

1 个答案: