Question

如何仅通过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>
        )
        }
    }

Answer 1

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

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

也对文本执行此操作，

Answer 2

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

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

2 个答案: