如何获取TouchableOpacity的文本字符串及其中的数字‘1’？

嘿，这问题我太熟了！在React Native里处理TouchableOpacity的文本内容，其实有几种实用的方法，我给你一步步拆解清楚～

最稳妥的方式是提前把文本存到变量或状态里，这样不用费劲去组件里“扒”内容，直接调用就行，比如：

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const MyButton = () => {
  // 把按钮文本存在变量里
  const buttonText = '下单数量 1';

  const handlePress = () => {
    console.log('当前按钮的文本:', buttonText);
  };

  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>{buttonText}</Text>
    </TouchableOpacity>
  );
};

export default MyButton;

如果遇到动态生成的文本、或者没法提前存变量的情况，那就用useRef获取内部Text组件的引用，再通过props.children拿到文本：

import React, { useRef } from 'react';
import { TouchableOpacity, Text } from 'react-native';

const DynamicButton = () => {
  const textRef = useRef(null);

  const handlePress = () => {
    if (textRef.current) {
      // 从Text组件的props里拿到文本内容
      const buttonText = textRef.current.props.children;
      console.log('当前按钮的文本:', buttonText);
    }
  };

  return (
    <TouchableOpacity onPress={handlePress}>
      {/* 给Text组件加ref */}
      <Text ref={textRef}>动态生成的文本 1</Text>
    </TouchableOpacity>
  );
};

export default DynamicButton;

拿到文本之后，用正则表达式就能轻松提取数字啦。根据你的需求，这里专门找数字'1'，可以这么写：

const handlePress = () => {
  // 假设已经通过上面的方法拿到了buttonText
  const buttonText = '下单数量 1';

  // 提取文本里所有数字字符
  const allNumbers = buttonText.match(/\d/g);
  
  if (allNumbers) {
    // 找到其中的'1'
    const targetNumber = allNumbers.find(num => num === '1');
    console.log('提取到的数字1:', targetNumber);
  }
};

如果确定文本里只有一个数字，而且就是'1'，还可以简化成：

const handlePress = () => {
  const buttonText = '下单数量 1';
  const extractedNumber = buttonText.match(/\d/)[0];
  console.log('提取到的数字:', extractedNumber); // 结果就是'1'
};

要是文本里有多个数字，你还可以调整正则或者筛选逻辑，比如找第一个出现的1，或者收集所有1，都很灵活～

内容的提问来源于stack exchange，提问作者Jeaf Gilbert