如何仅更改react-native中按钮集合中单击的按钮颜色

时间:2017-10-04 12:05:03

标签: react-native

如何仅通过onPress更改react-native中按钮集合中单击的按钮颜色。 按钮文本也应该通过onPress更改。

示例代码

export class App extends Component {

        changeColor() {
            // code here
        }

        render() {
        return (
        <View style={styles.button_view}>
            <TouchableOpacity onPress={this.changeColor.bind(this)} style={styles.button}>
                <Text style={styles.button_text}>
                    Button 1
                </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.changeColor.bind(this)} style={styles.button}>
                <Text style={styles.button_text}>
                    Button 2
                </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.changeColor.bind(this)} style={styles.button}>
                <Text style={styles.button_text}>
                    Button 3
                </Text>
            </TouchableOpacity>
        </View>
        )
        }
    }

2 个答案:

答案 0 :(得分:0)

我尝试了一下,但效果很好,但还有很长的路要走; 首先为它们每个设置一个标志,例如:

constructor(props){
super(props);
  this.state={
    button_1 : false,
    button_2 : false,
    button_3 : false,
    button_4 : false,
  }

然后,对每个Button执行此操作:

 <Button
      title="Button 1"
      color={this.state.button_1 ? "green" : "gray"}
      onPress={() => {
                  this.setState({
                       button_1: !this.state.button_1,
                       button_2: false,
                       button_3: false,
                       button_4: false
                         });
               }}
  />

 <Button
      title="Button 2"
      color={this.state.button_2 ? "green" : "gray"}
      onPress={() => {
                  this.setState({
                       button_1: false,
                       button_2: !this.state.button_2,
                       button_3: false,
                       button_4: false
                         });
               }}
  />

也对文本执行此操作,

答案 1 :(得分:0)

根据您的代码,看起来所有按钮的样式都相同,因此我将创建一个自定义按钮组件并进行渲染,并传递一个标志(例如active),并从{{1}中的父组件中将其设置为true } 方法。 然后,您可以基于活动道具进行样式设置。 即:样式= {{颜色:this.props.active? 'red':'white';}}