0

我想要实现的是，根据来自 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;

提前致谢

4

1 回答 1

0

如果 styler 在同一个类中，则使用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> });
 }
于 2016-07-20T08:49:59.340 回答