無法在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

您必須使用索引語法，而不是點語法，如果你想使用一個變量的值從對象如讀屬性