如何在React Native中使用动态堆栈屏幕？

6ojccjat 于 2023-03-19 发布在 React

关注(0)|答案(1)|浏览(166)

我在App.js中定义了如下导航

<NavigationContainer>
    <Stack.Navigator>
      <StackScreenCard
        name="HomeScreen"
        componentName="HomeScreen"
        title="Country City Information"
      />

      <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
    </Stack.Navigator>
  </NavigationContainer>

在App.js中使用以下代码导入StackScreenCard

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import StackScreenCard from "./components/ui/StackScreenCard";

StackScreenCard.js代码如下

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const StackScreenCard = ({ name, componentName, title }) => {
  const Stack = createNativeStackNavigator();

  return (
    <Stack.Screen
      name={name}
      component={componentName}
      options={{
        title: { title },
        headerTintColor: "white",
        headerTitleAlign: "center",
      }}
    />
  );
};

export default StackScreenCard;

它给出错误消息
错误：导航器只能包含“Screen”、“Group”或“React.Fragment”作为其直接子级（找到屏幕“HomeScreen”的“StackScreenCard”）。若要在导航器中呈现此组件，请在“component”属性中将其传递给“Screen”。
如果我从App.js中删除StackScreenCard调用，那么屏幕就可以正常工作了。难道不能使用动态的Stack.Screen吗？基本上，我想像创建一个单独的组件一样创建它，这样我就可以在那里写一次css，然后针对不同的屏幕多次调用该组件。

react-native

来源：https://stackoverflow.com/questions/75670461/how-to-use-dynamic-stack-screen-in-react-native

1条答案

按热度按时间

bvjxkvbb1#

该<Stack.Screen />组件需要直接在其父组件stack.navigator和navigatorContainer内部进行渲染，因此单独做一个组件在屏幕内部进行渲染，而不是渲染返回屏幕的组件
不用在stack.navigator中创建组件并进行渲染，stack.navigator会返回stack.screen组件，你可以直接渲染一个动态组件并在screen中命名它，这样你就可以创建一个单独的组件，并做任何你想做的事情，比如样式，传递数据等等。你甚至可以在这个组件中创建嵌套的导航。在这个例子中，比如说Home。现在这个Home组件可以返回任何东西。
在App.js中

function App(){
return(
 <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="ScreenCard" component={ScreenCard}/>
          <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
        </Stack.Navigator>
      </NavigationContainer>
)

}

在组件ScreenCard中

import {View,Text} from react Native
const ScreenCard = () => {
  
  return (
    <View> 
       <Text> Screen card </Text>
   </View>
  );
};

export default StackScreenCard;

您可以根据需要更改此屏幕组件
如果你想传递 prop 给这个组件，你可以做另一个组件，它将返回这个特定的组件与 prop ，让我来告诉你
在App.js中

function App(){

    function StackScreenCard(){
    return <ScreenCard data={dataExample} color={colorExample} />
    }

    return(
     <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="ScreenCard" component ={StackScreenCard}/>
              <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
            </Stack.Navigator>
          </NavigationContainer>
    )

    }

现在你可以把你喜欢的 prop 传递给这个组件并动态地改变它。还有其他的方法。请随意尝试。

赞(0）回复(0）举报 2023-03-19

我来回答

如何在React Native中使用动态堆栈屏幕？

1条答案

相关问题

热门标签

最新问答