在 React Native 的 Flatlist 中使用自定义元素的参数进行导航：空参数

在没有成功解决我的问题之后here https://stackoverflow.com/questions/67862370/navigation-with-parameters-from-custom-element-in-flatlist-in-react-native-erro，我必须创建一个新问题，其中包含我的所有课程。

我是本地反应新手，在弄清楚如何通过传递参数从一个类导航到另一个类时遇到问题，非常感谢您的帮助。

我想做的就是：

1. 使用包含 CustomButton 的平面列表创建 Session
2. 单击 CustomButton 从 SessionCreate 导航到 ItemConfig
3. 将参数“element”传递给 ItemConfig
4. 显示 ItemConfig 中传入的参数内容

通过此设置，一个空的“元素”将作为参数传递给 ItemConfigScreen（但不会发生错误）：

app.js:

//Views

function Home({ navigation }) {
  return (
    <HomeScreen />
  );
}

function Session({ navigation }) {
  return (
    <SessionScreen />
  );
}

//subviews

function SessionCreate({ navigation }) {
  return (
    <SessionCreateScreen />
  );
}


function ItemConfig({ navigation }) {
  return (
    <ItemConfigScreen />
  );
}



//navigation stacks
const SessionStack = createStackNavigator();

function SessionStackScreen({ navigation }) {
  return (
    <SessionStack.Navigator>
      <SessionStack.Screen
        name="Session"
        component={Session}
        options={{ tabBarLabel: 'Session!'  }}
      />
      <SessionStack.Screen
        name="SessionCreate"
        component={SessionCreate}
        options={{ tabBarLabel: 'SessionCreate!' }}
      />
      <SessionStack.Screen
        name="ItemConfig"
        component={ItemConfig}
        options={{ tabBarLabel: 'ItemConfig!' }}
      />
      
    </SessionStack.Navigator>
  );
}



//Navbar Bottom
const Tab = createBottomTabNavigator();

function App() {
  return (
    <View style={[theme.colcontainer, { flexDirection: "column" }]} >
      
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === 'Home') {
                iconName = focused ? 'home' : 'home-outline';
              } else if (route.name === 'Session') {
                iconName = focused ? 'book' : 'book-outline';
              } 

              // dynamic ionicon
              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
       

        >
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Session" component={SessionStackScreen} />
          
        </Tab.Navigator>
      </NavigationContainer>
    </View >
  );
}

export default App;

SessionScreen.js：

function SessionScreen() {
    const navigation = useNavigation();

    return (
        <View style={[theme.container, { flexDirection: "column" }]} >

                <View>
                    <TouchableOpacity onPress={() => navigation.navigate('SessionCreate')}>
                        <Text >Create Session</Text>
                    </TouchableOpacity>
                </View>

        </View >
    );
}

export default SessionScreen;

SessionCreateScreen.js：

    //data
    const sessionElements = [
        {
            id: "1",
            title: "title1"
        }
    ];
    
    
    function SessionCreateScreen() {
        const navigation = useNavigation()
    
        const renderItemConfiguration = ({ item }) => (
           <CustomButton element={item.title} onPress={() => navigation.navigate('ItemConfig', { element: 'item.title' })} />
 );
    
        return (
            
                <View style={{ flexDirection: "column", flex: 2}} >
                 
                    <SafeAreaView >
                        <FlatList
                            data={sessionElements}
                            renderItem={renderItemConfiguration}
                            keyExtractor={(item) => item.id}
                        />
                    </SafeAreaView>
    
                </View >
        );
    }
    
    
    
    export default SessionCreateScreen;

ItemConfigScreen.js：

const element = "";

function ItemConfigScreen() {

    return (
        <ScrollView >
            <View style={{ flexDirection: "column", flex: 2}} >
                <Text>Configure {element} here</Text>
            </View >
        </ScrollView>
    );

}

export default ItemConfigScreen;

任何帮助表示赞赏。

要获取 ItemConfigScreen 中的参数，您必须使用 React-navigation 包中的 useRoute 钩子。

你可以在这里读更多关于它的内容useRoute https://reactnavigation.org/docs/use-route/

import {useRoute} from '@react-navigation/native';
function ItemConfigScreen() {

const route = useRoute();

const element = route.params?.element;

    return (
        <ScrollView >
            <View style={{ flexDirection: "column", flex: 2}} >
                <Text>Configure {element} here</Text>
            </View >
        </ScrollView>
    );

}

CustomButton 中的 onPress 导航调用也存在错误，您必须传递“item.title”而不是“item.title”${item.title}那么只有实际数据才会被传递。JS 模板文字 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

<CustomButton element={item.title} onPress={() => navigation.navigate('ItemConfig', { element: `${item.title}` })} />