javascript - 使用本机反应创建页面构建器

Question

我为一个自动生成多个页面的页面写了下面的代码，但是它有一个错误并且错误是不能像String一样添加JSX，当然我也写了这个String格式的代码，但是输出的工作只是一个字符串。像字符串一样添加 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>
  );
}

谢谢。

标签： javascriptreact-native

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>
  )
}