React Native - 外部样式与内联不同

Question

我正在尝试根据屏幕宽度缩小图像尺寸。但是，当我尝试删除内联时，它突然停止工作。我没有看到错误。

这有效：

export default class App extends Component<Props> {
    render() {
        return (
            <ImageBackground style={{
                flex: 1,
                width: deviceWidth,
                height: (deviceWidth / 3) * 2,
                alignSelf: 'center'
            }} source={require('./img/space.jpeg')}>
                <Text style={styles.something}>Neco</Text>
            </ImageBackground>
        );
    }
}

const deviceWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
    something: {
        fontSize: 40,
        color: 'red'
    }
});

working example picture

这打破了：

...
<ImageBackground style={styles.what} source={require('./img/space.jpeg')}> 
    <Text style={styles.something}>Neco</Text>
</ImageBackground>
...
const styles = StyleSheet.create({
    what: {
        flex: 1,
        width: deviceWidth,
        height: (deviceWidth / 3) * 2,
        alignSelf: 'center'
    },
    something: {
        fontSize: 40,
        color: 'red'
    }
});

broken example picture