React Native 中的动态颜色

Question

我是 React Native 的新手。我想在 selection.

的基础上为我的应用程序创建动态颜色

/**
 * 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);

每当我 select 一种新颜色并提醒它时，它都会向我显示颜色 selection 但不会更新我列表的背景颜色。

知道我做错了什么吗。

Answer 1

试试这个：

您不应将颜色存储在全局变量中，而应将其存储在组件的状态中。如果您不知道状态在 React 中的含义，请考虑阅读这篇 article.

我看到你调用了一个 setColor 函数来改变变量 my。相反，您可以调用

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

然后在 render() 方法中，您可以将其附加到数组以覆盖默认样式：

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

这样做的目的是 setState 触发新的 UI 渲染。

React Native 中的动态颜色

Dynamic color in react native

javascript

jsx

reactjs

react-jsx

react-native