Question

M从React Native开始并遇到困难。我无法通过使用道具设置样式。

＆＃13;

import React, { Component } from 'react';
import { AppRegistry, Text, View, Image, StyleSheet } from 'react-native';

const Styles = StyleSheet.create({
    imageStyle : {
        height: 100,
        width: 100
    },
    red: {
        color: 'red',
        fontSize: 20,
        fontWeight: 'bold',
    },
    green : {
        color: 'green',
        fontSize: 30,
        fontWeight: 'bold',
    },
    backgroundGrey : {
        color: 'white',
        backgroundColor: 'gray',
        fontSize: 30,
        fontWeight: 'bold',
    }
})

class ColorfulText extends Component {
    render() {
        var st = this.props.sty;
        var name = this.props.name;
        return ( < Text
        style={Styles.st}> Hi Colorful {name}</Text >);
    }
}

class HelloWorldApp extends Component {
    render() {
        return (
            <View>
                <ColorfulText name="Hanuman" sty="green"/>
            </View>


    );
    }
}

AppRegistry.registerComponent('myApp', () => HelloWorldApp);

＆＃13;

名称道具有效，但风格道具不适用。

我无法找到这里发布的答案。如果这个问题重复，请告诉我。我对此进行了远程处理。

Answer 1

class ColorfulText extends Component {
    render() {
        var st = this.props.sty;
        var name = this.props.name;
        return ( < Text
        style={Styles[st]}> Hi Colorful {name}</Text >);
    }
}

如果您尝试使用变量的值从对象读取属性，则必须使用索引语法而不是点语法您希望Styles.green不是Styles.sty

无法使用道具在React Native中设置样式

1 个答案: