0
初めての出会いです。そして私は選択に基づいて私のアプリケーションの動的な色を作りたいと思います。反応原色のダイナミックカラー
/**
* 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);
私は新しい色を選択し、それを警告するたびに、それは私の色の選択を示していますが、私のリストの背景色を更新しません。
私が間違っていることを考えてください。
コンポーネントは 'state'の変更のみに反応するため、' state'を使用して 'setState'で変更することを検討してください。 – Cherniv
どのように変更する必要がありますか？ –