使用BottomTabBar在Press上反应本地新屏幕

Question

我的代码被卡住了。

如何使用同一文件中的代码重定向到新屏幕？

App.js:

const Navigator = ()=> {
return(
<NavigationContainer>
<Tab.Navigator
initialRouteName={homeName}
>
<Tab.Screen name={homeName} component={HomeScreen} options={{ headerShown: false, tabBarIcon:()=>(<Icon name={"home"} size={25}/>)}}/>
<Tab.Screen name={listName} component={ListScreen} options={{headerShown: false, tabBarIcon:()=>(<Icon name={"list"} size={20}/>)}}/>
<Tab.Screen name={perizieName} component={PeritiScreen} options={{ headerShown: false, tabBarIcon:()=>(<Icon name={"laptop"} size={25}/>) }}/>
</Tab.Navigator>
</NavigationContainer>
);
}

===更新===

我很想这样做，但不幸的是，我没有找到正确的方法，此外，我应该能够通过"；provincia"；参数

<SafeAreaView>
<View style={style.searchContainer}>
<Text style={{paddingLeft:10}}>
<Icon name="search" size={25} color={COLORS.grey} />
</Text>
<TextInput placeholder="Cerca provincia" style={{fontSize:20, paddingLeft:10}} />
</View>
<ScrollView>
{
masterList.map((provincia)=>{
return(
<View>
<View style={{flexDirection:"row"}}>
<View>
<Text style={style.provincia}>
{provincia.nome}
</Text>
<Text style={{marginLeft:10, fontSize: 12, color:COLORS.grey, marginBottom:5}}>Ristoranti consigliati nella provincia di {provincia.nome},{"n"}selezione quello che preferisci</Text>
</View>
<View style={{alignSelf:"center", alignItems:"center", paddingLeft: "18%"}}>
<Icon 
onPress={"i need to go to DetailsScreen"} // <== here
name={"arrow-right"} size={20} />
</View>
</View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{
provincia.ristoranti.map((ristorante)=>{
return(
<CardResturant
resturant = {ristorante}
/>
)
})
}
</ScrollView>
</View>
)})
}

</ScrollView>
</SafeAreaView>

调用上面显示的代码的文件依次包含导航：

const ListScreen = ()=>{
return(
<SafeAreaView style={{flex:1}}>
<Tab.Navigator
swipeEnabled={false}
initialRouteName={"Lista completa"}
style={style.topTap}
>
<Tab.Screen name="Mappa" component={MapScreen} />
<Tab.Screen name="Lista completa" component={AllScreen} /> // <== the code shown above
</Tab.Navigator>
</SafeAreaView>
);
};

一旦我理解了这一点，我就可以将其调整为可点击的，并显示餐厅的细节。

Answer 1

ListScreen是嵌套在另一个Tab navigator中的Tab navigator。它包含一个用于呈现组件AllScreen的选项卡。屏幕DetailsScreen当前不是navigator中的屏幕，因此您无法导航到它。

我建议你把AllScreen变成Stack。该堆栈包含作为初始路由的AllScreen和作为第二屏幕的DetailsScreen。导航对象将被传递给AllScreen，您可以像往常一样使用它。

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function AllStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Lista completa" component={AllScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
}
const ListScreen = ()=>{
return(
<SafeAreaView style={{flex:1}}>
<Tab.Navigator
swipeEnabled={false}
initialRouteName={"Lista completa"}
style={style.topTap}
>
<Tab.Screen name="Mappa" component={MapScreen} />
<Tab.Screen name="Lista completa" component={AllStack} /> 
</Tab.Navigator>
</SafeAreaView>
);
};

屏幕AllScreen是堆栈的初始路由。在AllScreen中，您可以知道导航到DetailsScreen。

function AllScreen({navigation}) {
...
<Icon 
onPress={() => navigation.navigate("Details")} 
name={"arrow-right"} size={20} />
...
}