React Native中如何拆分复杂格式的交易历史字符串？

Hey there! Let's sort out that transaction history issue you're facing. I spotted the main problem in your current code—you're splitting the entire txnHistory string by | every time inside the forEach loop, instead of parsing each individual transaction line. Let's break this down into simple, actionable steps.

First, Let's Fix the Data Parsing Logic #

Your original string uses ~ to separate transactions and | to split each transaction's details. Here's how to properly parse it:

1. Split the full history by ~ to get an array of individual transactions.
2. Filter out any empty strings (since your example ends with a ~, this will create an empty item at the end of the array).
3. Loop through each transaction string and split it by | to extract the date, email, description, and amount.

Here's the corrected code for parsing:

// Your raw transaction history string
const txnHistory = "July 6, 2022|email2@email.com|description|-200~July 3, 2022|email@email.com|another description|+200~";

// Step 1: Split into transactions and remove empty entries
const transactionStrings = txnHistory.split('~').filter(txn => txn.trim() !== '');

// Step 2: Parse each transaction into a usable object
const parsedTransactions = transactionStrings.map(txn => {
  const [date, email, description, amount] = txn.split('|');
  return { date, email, description, amount };
});

// Check the parsed data (optional)
console.log(parsedTransactions);

Next, Rendering in React Native #

Your original UI code tried to use individual variables like xdate, but that won't work for multiple transactions. Instead, we'll use map to loop through the parsed transactions and render a UI component for each one. We'll also tweak the layout and add some UX improvements:

import { SafeAreaView, View, Text, Dimensions } from 'react-native';
// Make sure you've imported your Ubuntu fonts correctly (e.g., via Expo Google Fonts)

export default function TransactionHistoryScreen() {
  const txnHistory = "July 6, 2022|email2@email.com|description|-200~July 3, 2022|email@email.com|another description|+200~";
  
  // Parse the transactions as shown earlier
  const transactionStrings = txnHistory.split('~').filter(txn => txn.trim() !== '');
  const parsedTransactions = transactionStrings.map(txn => {
    const [date, email, description, amount] = txn.split('|');
    return { date, email, description, amount };
  });

  return (
    <SafeAreaView style={{ flex: 1, padding: 10 }}>
      {/* Loop through each parsed transaction to render its UI */}
      {parsedTransactions.map((transaction, index) => (
        <View key={index} style={{ marginBottom: 20, position: 'relative' }}>
          <Text style={{
            fontFamily: 'Ubuntu_500Medium',
            fontSize: 25,
            marginLeft: Dimensions.get('window').width / 5.5,
            marginVertical: 7
          }}>
            {transaction.date}
          </Text>
          <Text style={{
            fontFamily: 'Ubuntu_500Medium',
            fontSize: 20,
            marginLeft: Dimensions.get('window').width / 3.5,
            marginVertical: 3
          }}>
            {transaction.email}
          </Text>
          <Text style={{
            fontFamily: 'Ubuntu_400Regular',
            fontSize: 25,
            marginLeft: Dimensions.get('window').width / 2.7,
            marginVertical: 3
          }}>
            {transaction.description}
          </Text>
          <Text style={{
            fontFamily: 'Ubuntu_700Bold',
            fontSize: 25,
            position: 'absolute',
            right: 20,
            top: 20,
            color: transaction.amount.startsWith('+') ? '#00fa36' : '#ff4444',
            textShadowColor: transaction.amount.startsWith('+') ? '#00fa36' : '#ff4444',
            textShadowRadius: 5
          }}>
            ${transaction.amount.replace('+', '')}
          </Text>
        </View>
      ))}
    </SafeAreaView>
  );
}

Key Improvements Explained #

• Empty String Filter: The filter method removes the empty entry caused by the trailing ~ in your original string.
• Usable Objects: Parsing each transaction into an object makes it easier to reference properties later (like transaction.date instead of array indices).
• Dynamic Rendering: Using map ensures every transaction gets its own UI component—no more hardcoding variables.
• Better Layout: Switched from left to marginLeft and used position: absolute for the amount to avoid layout issues.
• UX Tweak: Colored positive amounts green and negative amounts red, and removed the + sign for cleaner display.

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