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

Question

M以React Native开头，并陷入困境。 我无法通过使用道具来设置样式。

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);

名称道具作品，但风格的道具亘古不变的。

我无法找到这里发布的答案。如果这个问题是重复的，让我知道。我很偏僻。

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

您必须使用索引语法，而不是点语法，如果你想使用一个变量的值从对象如读属性