使用本機反應創建頁面構建器

Question

我為一個自動生成多個頁面的頁面寫了下面的代碼，但是它有一個錯誤並且錯誤是它不能像String一樣添加JSX，當然我也用String格式寫了這個代碼，但是output的工作只是一個字符串。 像字符串一樣添加 JSX 需要什么？

import React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { navigationRef } from "./RootNavigation";
const RootStack = createStackNavigator();
/*
export default function App() {
  return (
    <NavigationContainer
      ref={navigationRef}
      theme={{
        colors: {
          primary: "black",
          background: "white",
          card: "#92eef1",
          text: "black",
          border: "purple",
          notification: "yellow"
        }
      }}
    >
      <RootStack.Navigator screenOptions={{ headerShown: true}}>
        <RootStack.Screen name="SplashScreen" component={SplashScreen} />
        <RootStack.Screen name="Search" component={Search} />
        <RootStack.Screen name="BuildScreen" component={BuildScreen} />
        <RootStack.Screen name="Info" component={Info} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}
*/
export default function App(){
  return StackCreator();
}

let state = {
  name: ["Home", "SplashScreen", "Search", "BuildScreen", "Info"],
  screen: [Home, SplashScreen, Search, BuildScreen, Info],
  length: 5
};
function StackCreator() {
  let text =
    (<NavigationContainer ref={navigationRef} theme={{colors: {primary: 'black',background: 'white',card: '#92eef1',text: 'black',border: 'purple',notification: 'yellow'}}}><RootStack.Navigator screenOptions={{headerShown: false}}>;
    for (let i = 0; i < state.length; i++) {
    text += <RootStack.Screen name={state.name[i]} component={state.name[i]} />;
  }
  text += </RootStack.Navigator></NavigationContainer>);
  return text;
}

function Home() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

function SplashScreen() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

function Search() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

function BuildScreen() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

function Info() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

謝謝。

Answer 1

JSX 期望接收有效的 React 組件數組或有效的單個 React 組件，而不是字符串。

為了實現你想要做的事情，你應該做這樣的事情（未經測試）：

function StackCreator() {
  let screens = []
  for (let i = 0; i < state.length; i++) {
    screens.push(<RootStack.Screen name={state.name[i]} component={state.screen[i]} />)
  }

  return (
    <NavigationContainer ref={navigationRef} theme={{colors: {primary: 'black',background: 'white',card: '#92eef1',text: 'black',border: 'purple',notification: 'yellow'}}}>
      <RootStack.Navigator screenOptions={{headerShown: false}}>
        {screens}
      </RootStack.Navigator>
    </NavigationContainer>
  )
}