React Native新手求教：如何通过字符串自动生成组件？

Hey there! As someone who’s built dynamic content systems in React Native before, I’ve got a practical approach to solve your problem of converting that story string into native components. Here’s how you can pull it off step by step:

1. First: Parse the Story String #

The core challenge is turning your custom-markup string into structured data React can work with. We’ll use regular expressions to extract plain text and button metadata from the string cleanly.

Example Parsing Function #

const parseStoryString = (story) => {
  // Grab the main text before the choices block
  const mainText = story.split('[[Choices]]')[0].trim();
  
  // Extract content between the two [[Choices]] tags
  const choicesMatch = story.match(/\[\[Choices\]\](.*?)\[\[Choices\]\]/s);
  if (!choicesMatch) return { mainText, choices: [] };
  
  const choicesContent = choicesMatch[1];
  
  // Pull out each choice's section target and display text
  const choiceRegex = /\[\[Choice, Section="(.*?)"\]\](.*?)\[\[Choice\]\]/g;
  const choices = [];
  let match;
  
  while ((match = choiceRegex.exec(choicesContent)) !== null) {
    choices.push({
      section: match[1],
      text: match[2].trim()
    });
  }
  
  return { mainText, choices };
};

This function breaks your story into two usable parts:

• mainText: The plain narrative text to render in a <Text> component
• choices: An array of objects containing each button's target section and display text

2. Render Components Dynamically #

With structured data in hand, we can map it directly to React Native components. Create a reusable component that takes your story string and navigation handler as props:

Story Renderer Component #

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

const StoryRenderer = ({ story, goToSection }) => {
  const { mainText, choices } = parseStoryString(story);
  
  return (
    <View style={styles.container}>
      <Text style={styles.storyText}>{mainText}</Text>
      {choices.length > 0 && (
        <View style={styles.choicesContainer}>
          {choices.map((choice, index) => (
            <Button
              key={index}
              title={choice.text}
              onPress={() => goToSection(choice.section)}
            />
          ))}
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 16,
  },
  storyText: {
    fontSize: 16,
    lineHeight: 24,
  },
  choicesContainer: {
    gap: 12,
  },
});

export default StoryRenderer;

3. Use the Component in Your Screen #

Drop this renderer into your parent screen, pass your story string and navigation logic, and you’re good to go:

import StoryRenderer from './StoryRenderer';

const YourAdventureScreen = () => {
  const goToSection = (sectionId) => {
    // Add your navigation logic here (e.g., update state, navigate to a new screen)
    console.log(`Navigating to section: ${sectionId}`);
  };
  
  const story = "You face the bear please select your action: [[Choices]] [[Choice, Section=\"1\"]] Fight using the sword [[Choice]] [[Choice, Section=\"1\"]] Use the torch [[Choice]] [[Choice, Section=\"2\"]] Run Away [[Choice]] [[Choices]]";
  
  return (
    <StoryRenderer story={story} goToSection={goToSection} />
  );
};

Key Notes & Optimizations #

• Error Handling: Add checks for malformed markup (e.g., missing [[Choices]] tags or incomplete Choice entries) to avoid unexpected crashes.
• Regex Flexibility: If your markup grows more complex (nested tags, special characters), you might want to switch to a dedicated parser library, but regex works perfectly for simple cases like this.
• Performance: If you reuse the same story string across renders, cache the parsed result to avoid re-running regex logic unnecessarily.

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