React Native - 함수에서 스타일 가져 오기 (Android)

Question

내가 얻으려고하는 것은 JSON에서 무엇이 표시되는지에 따라 동적으로 뷰를 추가하는 것입니다. 예를 들어, 하나의 이벤트는 빨간색으로 표시되고 다른 이벤트는 파란색으로 표시 될 수 있습니다. 앱이 이에 따라보기를 삽입해야합니다. 스타일러는 같은 클래스에있는 경우 사전에

class MainPage2 extends Component { 


constructor() { 
super() 
var sleepTime = ["15/07/2016 15:00:00", "15/07/2016 14:20:30"]; 
var minuteDifference = Math.round((((sleepTime[0] - sleepTime[1])/1000)/60)); 

var width = {timeAsleep: 120, timeAwake:60, timeAway:60} 
this.state = { 
    timeAsleep: width.timeAsleep, 
    timeAwake: width.timeAwake, 
    timeAway: width.timeAway, 
    array: [1,2] 
} //set the changeable values, we will get it from Json in our app 
    } styler (num) { 


    if (num == 1) 
    return styles.AsleepStyle; 

    if (num==2) 
    return styles.AwakeStyle; 

    if (num==3) 
    return styles.AwayStyle; 

    return styles.AwayStyle; 
    } 

    render() { 
    const {timeAsleep, timeAwake, timeAway} = this.state 
    let Arr = this.state.array.map((a, i) => { 
return <View key={i} style={this.styler(a)}></View> }); 

    return (
    <ScrollView> 

    <Text>First</Text> 
    <View style={this.styler}/> 
    { Arr } 

    <Text>Second</Text> 
    <TouchableHighlight onPress={() => this._onPressOut() }> 
     <Text>Push</Text> 
    </TouchableHighlight> 

    <View style={styles.viewLayout}> 


    <View style={[styles.bar, styles.AsleepStyle, {width: timeAsleep}]}/> 
    <View style={[styles.bar, styles.AwakeStyle, {width: timeAwake}]}/> 
    <View style={[styles.bar, styles.AwayStyle, {width: timeAway}]}/> 
    </View> 
    </ScrollView> 

    ) }} 

const styles = StyleSheet.create({ 
viewLayout: { 
    flex: 1, flexDirection: 'row',padding:20 
}, 

bar: { 


height: 18 

}, 

AsleepStyle: { 
backgroundColor: '#F55443' 
}, 
AwakeStyle: { 
backgroundColor: '#FCBD24' 
}, 
    AwayStyle: { 
backgroundColor: '#59838B' 
} 
}); 

module.exports = MainPage2; 

덕분에

Answer 1

다음 this.styler를 사용하여 코드가 어떻게 구성되어 있는지

render() { 
    const {timeAsleep, timeAwake, timeAway} = this.state 
    let Arr = this.state.array.map((a, i) => { 
    return <View key={i} style={this.styler(a)}></View> }); 
}