小数中的逗号使用 <Text>

Question

我在 Holder 中有一个值，它应该显示货币，它直接从 REST API 显示货币，很好，但不是像这样显示值

123,456,789.00

显示是这样的123456789.00我一直想格式化也没用。有没有办法在 React Native 中做到这一点？持有者看起来像这样

{this.state.balance}

在网上搜索了一下，暂时找不到好的东西。

Answer 1

使用 toLocaleString() 添加逗号。

示例：

let num = 123456789.00

console.log(num.toLocaleString())

完整的工作示例：Expo Snack

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

let num = 123456789.1;
export default function App() {
  const toCommaConvertion = (num) => {
    num += 0.001;
    let str = [...num.toLocaleString()];
    str.pop();
    return str.join('');
  };
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{toCommaConvertion(num)}</Text>
    </View>
  );
}

Answer 2

您应该将数字转换为逗号分隔格式

class BalanceExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      balance: 123456789,
    };
  }
   numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  render() {
    return (
    <Text>{this.numberWithCommas(this.state.balance)}</Text>
    );
  }
}

export default BalanceExample;

小数中的逗号使用 <Text>

commas in Decimals using <Text>

react-native

decimal