React Native比特币转BRL转换器无结果显示及Toast替代方案咨询

一、比特币转BRL转换器代码问题修复 #

你的代码存在状态处理、逻辑判断等多处错误，导致计算结果无法正常显示，以下是修正后的代码及问题解析：

核心问题解析 #

1. 输入状态未同步：TextInput的onChangeText回调未更新valor状态，后续计算始终使用初始空值。
2. NaN判断逻辑错误：!NaN(quantidade)是无效写法，正确判断非NaN应使用!isNaN(quantidade)。
3. 计算逻辑混乱：converterBTC中用已转换的BRL金额乘以输入值，属于逻辑错误，正确逻辑是用BTC汇率乘以输入的比特币数量。
4. 重复请求浪费资源：useEffect依赖valor导致每次输入都请求汇率，应仅在组件挂载时获取一次并缓存。
5. 单位处理缺失：输入提示支持SATS/BTC，但代码未处理SATS到BTC的转换（1BTC = 100,000,000 SATS）。

修正后的完整代码 #

import { View, Text, Pressable, StyleSheet, TextInput, Alert } from 'react-native';
import { useState, useEffect } from 'react'
import axios from 'axios'

export default function App() {
  const [valor, setValor] = useState('');
  const [resultado, setResultado] = useState(0);
  const [btcToBrlRate, setBtcToBrlRate] = useState(0);
  const [selectedUnit, setSelectedUnit] = useState('BTC'); // 新增单位切换状态

  // 仅在组件挂载时获取一次汇率
  useEffect(() => {
    async function fetchBitcoinPrice() {
      try {
        const response = await axios.get('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=brl');
        setBtcToBrlRate(response.data.bitcoin.brl);
      } catch (error) {
        Alert.alert('Erro', 'Falha ao obter taxa de câmbio');
      }
    }
    fetchBitcoinPrice();
  }, []);

  const converterBTC = (valorAtual) => {
    setValor(valorAtual); // 同步输入值到状态
    const quantidade = parseFloat(valorAtual);
    
    if (!isNaN(quantidade) && quantidade > 0) {
      // 根据选择的单位转换为BTC
      const btcAmount = selectedUnit === 'SATS' ? quantidade / 100000000 : quantidade;
      const calculatedResult = btcAmount * btcToBrlRate;
      setResultado(calculatedResult.toFixed(2)); // 保留两位小数
    } else if (valorAtual !== '') {
      Alert.alert('Aviso', 'Por favor, insira uma quantidade válida');
    } else {
      setResultado(0); // 清空输入时重置结果
    }
  }

  return (
    <View style={styles.container}>
      <TextInput 
        value={valor} 
        style={styles.caixaTexto} 
        placeholder="Quantidade de SATS ou BTC" 
        keyboardType='number-pad' 
        onChangeText={converterBTC}
      />
      
      {/* 新增单位选择按钮 */}
      <View style={styles.botoes}>
        <Pressable 
          style={[styles.botao, selectedUnit === 'BTC' && styles.botaoAtivo]}
          onPress={() => setSelectedUnit('BTC')}
        >
          <Text style={styles.textoBotao}>BTC</Text>
        </Pressable>
        <Pressable 
          style={[styles.botao, selectedUnit === 'SATS' && styles.botaoAtivo]}
          onPress={() => setSelectedUnit('SATS')}
        >
          <Text style={styles.textoBotao}>SATS</Text>
        </Pressable>
      </View>
            
      <Text style={styles.resultadoTexto}>
        {resultado > 0 ? `R$ ${resultado}` : 'R$ 0,00'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  botoes:{
    flexDirection: 'row',
    marginVertical: 20,
    justifyContent: 'center',
    elevation: 3
  },
  botao:{
    backgroundColor: '#d3d3d3',
    width: 80,
    height: 40,
    borderRadius: 10,
    marginHorizontal: 10,
    justifyContent: 'center',
    elevation: 2
  },
  botaoAtivo:{
    backgroundColor: '#ff8c00',
  },
  textoBotao:{
    color:'#ffffff',
    textAlign: 'center',
    fontWeight: 'bold'
  },
  caixaTexto:{
    width: 250,
    height: 40,
    borderRadius: 20,
    borderStyle: 'solid',
    borderColor: 'orange',
    borderWidth: 2,
    paddingHorizontal: 15,
    marginBottom: 10,
    elevation: 5
  },
  resultadoTexto:{
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 20,
    color: '#333'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

二、React Native中类似Toast的错误提示组件 #

React Native没有内置Toast组件，可通过以下方式实现类似效果：

1. 官方Alert组件 #

适合简单弹窗提示，无需额外依赖：

// 使用示例
Alert.alert('Erro', 'Por favor, insira uma quantidade válida');

2. 第三方Snackbar/Toast库 #

如果需要底部悬浮的Toast效果，常用库包括：

• react-native-toast-message：支持自定义样式、位置和动画，可显示成功/错误/普通提示。
• react-native-snackbar：遵循Material Design规范，显示在屏幕底部，自动消失。

以react-native-toast-message为例，基本用法：

// 导入库
import Toast from 'react-native-toast-message';

// 调用提示
Toast.show({
  type: 'error',
  text1: 'Erro',
  text2: 'Falha ao converter valor',
  position: 'bottom',
  visibilityTime: 3000
});

// 需在根组件中添加Toast容器
return (
  <View style={styles.container}>
    {/* 你的组件内容 */}
    <Toast />
  </View>
);

内容的提问来源于stack exchange，提问作者André Luís