Question

我试图导航到组件内的另一个屏幕，但这样做时发现一些问题。

首先，我有一个“ navigation.js”，我的所有链接都在其中，如下所示：

function HomeChild(){
  return(
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={({navigation}) => ({
          title: "Home",
          headerStyle:{
            backgroundColor: "lightblue"
          }
        })}
      />
    </Stack.Navigator>
  )
}

export default function Navigation({navigation}){
  return(
    <Tab.Navigator
      ...
    >
      <Tab.Screen 
        name="Home"
        children={HomeChild}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialIcons name="home" color={color} size={25}/>
          )
        }}
      />
    </Tab.Navigator>
  )
}

App.js

（obb，我有更多链接，但删除了一些链接，因为它们几乎完全相同）

render(){
    const detail = 1
        
    // if(this.state.firstLaunch === null){
    if(detail == 0){
      return null
    }
    // else if(this.state.firstLaunch == true){
    else if(detail == 1){
      return(
        <FirstLoad /> //<-- THIS is the one I'm gonna navigate from
      )
    }
    else{
      return(
        <NavigationContainer>
          <Navigation />
        </NavigationContainer>
      )
    }
  }

这是我要执行导航的组件

function submitButtonTapped({username, navigation}){
  // const navigation = useNavigation()

  navigation.navigate("Home") //Crashing on this.
}

export default function FirstLoad({ navigation }){
  return(
          {/* I removed some unnecessary code for this */ }

          <TouchableOpacity style={styles.submitButton} onPress={() => submitButtonTapped({username, navigation})}>
            <Text style={styles.submitButtonText}>Submit</Text>
          </TouchableOpacity>
  )
}

那么我有什么办法可以导航呢？如果是，该怎么办？

从组件访问导航

0 个答案: