如何处理带有样式更改的按下和取消按下可触摸组件？

Question

我的想法是创建一个特定的 Touchable 组件，就像一个按钮，有按下和未按下的感觉，并在我的应用程序上多次使用这个组件，但一次只能按下一个。如果先触摸一个然后再触摸另一个，则应先松开第一个，然后按第二个。思路不是用Redux来解决这个问题

我已经在处理按下哪个组件，并通过道具将动作发送到组件。但我不知道如何以通用方式同时管理所有按钮，我的意思是，不是为每个按钮创建一个变量。

我的应用程序：

<View>
<ActivityButton activityTitle={"B1"} submit={() => this.submitHandler("B1")} />
<ActivityButton activityTitle={"B2"} submit={() => this.submitHandler("B2")} />
</View>

我的组件（ActivityButton）：

this.state={active:false}

<TouchableOpacity style={this.state.active ? styles.buttonPress : styles.button} onPress={this.props.submit}>
                <View>
                    <Text>{this.props.activityTitle}</Text>
                </View>
</TouchableOpacity>

Answer 1

我猜你想做什么，比如单选按钮组？如果您的按钮仅位于单个页面中，您可以通过使用 MyApp 中的状态来检查启用了哪些按钮而不是按钮本身来实现。

我的应用程序

constructor(props) {
    super(props);
    this.state = {
        buttonIdThatEnable: "",
    };
}

submitHandler = (buttonId) => {
    this.setState({
        buttonIdThatEnable: buttonId,
    });
}

render() {
    return (
        <View>
            <ActivityButton
                activityTitle={"B1"}
                active={this.state.buttonIdThatEnable === "B1"}
                submit={() => this.submitHandler("B1")}
            />
            <ActivityButton
                activityTitle={"B2"}
                active={this.state.buttonIdThatEnable === "B2"}
                submit={() => this.submitHandler("B2")}
            />
        </View>
    )
}

ActivityButton（使用props.active确定样式）

<TouchableOpacity style={this.props.active ? styles.buttonPress : styles.button} 
    onPress={this.props.submit}>
                <View>
                    <Text>{this.props.activityTitle}</Text>
                </View>
</TouchableOpacity>

如果你的Buttons分布在不同的组件中，又不想使用Redux，可以考虑React Context API

如何处理带有样式更改的按下和取消按下可触摸组件？

How do I handle press and unpress touchable component with style changes?

reactive-programming

react-native

touchableopacity