Dynamische Farbe in reagieren nativ

Question

Ich bin neu zu reagieren nativ. Und ich möchte dynamische Farbe meiner Anwendung auf der Grundlage der Auswahl erstellen.

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    Image, 
    NavigatorIOS, 
    AlertIOS, 
    ListView, 
    ScrollView, 
    TouchableHighlight, 
    View 
} from 'react-native'; 
import { 
    times, 
    uniqueId 
} from 'lodash'; 

var Accordion = require('react-native-accordion/src/index.js'); 
var my = '#eee'; 
class AwesomeProject extends Component { 

    render() { 

     return ( 
      <View style = {styles.group} > 
       <NavigatorIOS style = {styles.group} 
       initialRoute = {{ 
         component: AccordionList, 
         title: 'Color Selector', 
         rightButtonIcon: require('./img/a.png'), 
         onRightButtonPress:() => { 

          AlertIOS.alert(
           'Select Color', 
           null, [{ 
            text: 'Red', 
            onPress:() =>setColor('red'), 
           }, { 
            text: 'Blue', 
            onPress:() => setColor('blue'), 
           }] 
          ); 

         } 
        } 
       } 
       barTintColor = "#0391D7" 
       titleTextColor = "#fff" 
       tintColor = '#fff' /> 
       <View style = {styles.line}/> 
      </View> 
     ); 
    } 
} 
setColor = function(color){ 
    if(color == 'blue') 
     my = '#eee'; 
    else 
     my = '#aaa'; 
    } 

const AccordionList = React.createClass({ 
    getInitialState() { 
     const ds = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => r1 !== r2 
     }); 
     return { 
      dataSource: ds.cloneWithRows(times(6, uniqueId.bind(null, 'ball_'))), 
     }; 
    }, 

    render() { 

     return (
      <View style = {{flex: 1}} > 
       <ListView dataSource = {this.state.dataSource} 
       renderRow = {this._renderRow} 
       /> 
      </View> 
     ); 
    }, 

    _renderHeader() { 
     return (<View style = { styles.listView } > 
       <Image style = {styles.icon} 
       source = {require('./img/1.jpg')}/> 
       <Text> Click to Expand {my}< /Text> 
      </View> 
     ); 
    }, 

    _renderContent() { 
     return (<View style = {styles.container} > 
      <Text style = {styles.welcome} > 
      { 
       'greeting' 
      } 
      Welcome to React Native! 
      </Text> 
      <Text style = { 
       styles.instructions 
      } > 
      To get started, edit index.ios.js 
      </Text> 
      <Text style = { 
       styles.instructions 
      } > 
      Press Cmd + R to reload, { 
       '\n' 
      } 
      Cmd + D or shake 
      for dev menu 
      </Text> 
     </View> 
     ); 
    }, 

    _renderRow(rowData) { 

     return (<Accordion header = { 
       this._renderHeader() 
      } 
      content = { 
       this._renderContent() 
      } 
      duration = { 
       300 
      } 
      easing = "easeOutCubic" /> 
     ); 
    } 
}); 

const styles = StyleSheet.create({ 
    icon: { 
     height: 20, 
     width: 20, 
     alignItems: 'flex-end', 
     borderWidth: 1 
    }, 
    listView: { 
     alignItems: 'flex-end', 
     paddingTop: 15, 
     paddingRight: 15, 
     paddingLeft: 15, 
     paddingBottom: 15, 
     borderBottomWidth: 1, 
     borderBottomColor: my, 
     backgroundColor: my, 
    }, 
    line: { 
     backgroundColor: '#bbbbbb', 
     height: StyleSheet.hairlineWidth, 
    }, 
    container: { 
     flex: 1, 
     borderWidth: 1, 
     justifyContent: 'center', 
     alignItems: 'flex-end', 
     backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
    }, 
    instructions: { 
     textAlign: 'center', 
     color: '#3333f3', 
     marginBottom: 5, 
    }, 
    group: { 
     backgroundColor: 'white', 
     flex: 1 
    }, 
    groupSpace: { 
     height: 15, 
     padding: 10 
    }, 
}); 
const styles_a = StyleSheet.create({ 
    icon: { 
     height: 30, 
     width: 30 
    }, 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    }, 
    line: { 
     backgroundColor: '#bbbbbb', 
     height: StyleSheet.hairlineWidth, 
    }, 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
    }, 
    instructions: { 
     textAlign: 'center', 
     color: '#3333f3', 
     marginBottom: 5, 
    }, 

    listView: { 
     alignItems: 'flex-start', 
     paddingTop: 15, 
     paddingRight: 15, 
     paddingLeft: 15, 
     paddingBottom: 15, 
     borderBottomWidth: 1, 
     borderBottomColor: my, 
     backgroundColor: '#fafafa', 
    }, 
    group: { 
     backgroundColor: 'white', 
     flex: 1, 
     padding: 10 
    }, 
    groupSpace: { 
     height: 15, 
     padding: 10 
    }, 
}); 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

Immer, wenn ich eine neue Farbe und alarmieren sie wählen, zeigt es mir die Farbauswahl, aber die Hintergrundfarbe meiner Liste nicht aktualisiert.

Irgendeine Idee, was ich falsch mache.

Answer 1

Versuchen Sie folgendes:

Statt die Farbe in einer globalen Variablen zu speichern, können Sie es in der Komponente Zustand gespeichert werden sollen. Wenn Sie nicht wissen, welcher Status in React bedeutet, lesen Sie diese article.

Ich sehe, dass Sie eine setColor-Funktion aufrufen, um die Variable my zu ändern. Stattdessen könnten Sie

this.setState({currentColor: 'red'}) 

rufen und dann in einem render() Methode, könnten Sie es auf ein Array anhängen, um den Standardstil überschreiben:

<SomeComponent style={[styles.myStyle, {backgroundColor: this.state.currentColor}]}/> 

Der Punkt dabei ist, dass setState eine neue UI-Trigger Rendern.