如何实现React Native TypeScript中按钮需另一按钮触发后才可点击

核心思路是通过React的状态管理控制目标按钮的可点击状态，以下是完整的实现代码：

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';

const ButtonToggleExample = () => {
  // 控制第二个按钮的可点击状态，初始为不可点击
  const [isSecondButtonEnabled, setIsSecondButtonEnabled] = useState<boolean>(false);

  // 第一个按钮的点击回调，激活第二个按钮
  const handleFirstButtonPress = () => {
    setIsSecondButtonEnabled(true);
  };

  // 第二个按钮的点击回调
  const handleSecondButtonPress = () => {
    console.log('第二个按钮被点击了');
  };

  return (
    <View style={styles.container}>
      <Button
        title="点击激活第二个按钮"
        onPress={handleFirstButtonPress}
      />
      <Button
        title="原本不可点击的按钮"
        onPress={handleSecondButtonPress}
        disabled={!isSecondButtonEnabled}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    gap: 20,
    paddingHorizontal: 20,
  },
});

export default ButtonToggleExample;

关键说明 #

• 使用useState<boolean>定义状态变量，明确类型符合TypeScript语法要求
• 第一个按钮的onPress回调更新状态，将第二个按钮的可点击状态设为true
• 第二个按钮通过disabled属性绑定状态变量，!isSecondButtonEnabled表示初始不可点击，状态切换后自动变为可点击

如果需要更复杂的激活逻辑（比如满足多个条件才解锁），只需在handleFirstButtonPress中添加对应判断后再更新状态即可。

内容的提问来源于stack exchange，提问作者Artur Fik