导航到另一个屏幕 - 'navigation.navigate' 不是函数

Question

我正在尝试从 Screen1 导航到 Screen2。 Screen1 正在我的主屏幕中呈现。到目前为止，我已经尝试使用 this.props.navigation.navigate 以及您目前看到的实现方式。

我创建了一个 snack expo here 来重现确切的错误，并在下面发布了一些代码。

感谢您的任何见解，我比您更感激。

EDIT:: 这需要在 IOS 上运行而我正在使用 react-native-navigation

App.js

 /*passing props to home is from my overall project, I left it in incase it impacted the answer*/ 
<Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="HomeScreen" options={{ headerShown: false }}>
        {(props) => (
          <Home {...props}/>
        )}
      </Stack.Screen>
       <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
  </Stack.Navigator>
);
}


export default function App() {

  return (
<NavigationContainer>
  <MyTabs/>
</NavigationContainer>
);

屏幕 1

export default class Screen1 extends React.Component {
  renderList = (props, navigation) => {
    return List.map((item, i) => {
      return (
        <View
        key={List.name}
          style={{
            width: windowWidth,
            height: scale(100),
            paddingLeft: scale(10)
          }}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Screen2')}
            activeOpacity={0.7}>
                <Text style={{fontSize: 20}}>{item.name}</Text>
          </TouchableOpacity>
        </View>
      );
    });
  };

  render() {
  return (
      <View style={{top: scale(50)}}>

          <ScrollView style={{ height: windowHeight }}>
            <this.renderList />
          </ScrollView>

      </View>
    );
  }
}

Answer 1

在屏幕 1 中

renderList = (props) => {
return List.map((item, i) => {
  return (
    <View
    key={List.name}
      style={{
        width: windowWidth,
        height: scale(100),
        paddingLeft: scale(10)
      }}>
      <TouchableOpacity
        onPress={() => this.props.navigation.navigate('Screen2')}
        activeOpacity={0.7}>
            <Text style={{fontSize: 20}}>{item.name}</Text>
      </TouchableOpacity>
    </View>
  );
});

在家里

const Home = (props) => {


return (
<View>
    <Screen1 {...props}/>
</View>

);

}

在应用程序中

<Tab.Navigator initialRouteName="Home">
  <Tab.Screen name="Home" options={{ headerShown: false }} component={Home}/>

   <Tab.Screen
    name="Screen1"
    component={Screen1}
    options={{ headerShown: false }}
  />

  <Tab.Screen
    name="Screen2"
    component={Screen2}
    options={{ headerShown: false }}
  />

对我来说工作完美（我拍了一些照片，但我还没有被授权，新用户...）

说我

Answer 2

您没有将 navigation props 传递给 Screen1。您可以像下面的代码一样将导航道具传递给 Screen1，或者最好将 Screen1 作为 Initial Route 而不是将其作为组件调用 主屏幕.

好方法：更新App.js中的以下区域，如下所示

.... 
<Stack.Navigator initialRouteName="Screen1"> // made Screen1 as initial route
      <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
  </Stack.Navigator> 
....

方法 2 ：如果您希望将主屏幕作为初始路线，请更新 Home.js 中的以下区域，如下所示

....
const Home = (props) => {
    return (
      <View>
        <Screen1 navigation={props.navigation}/> // navigation props passed to Screen1 component
      </View>
    );
}
....

Answer 3

利用钩子useNavigation.

Home.js

const Home = (props) => {
  const navigation = useNavigation();
  return (
    <View>
      <Screen1 navigation={navigation} />
    </View>
  );
};

Screen1.js

export default class Screen2 extends React.Component {

  renderList = (props) => {
    return List.map((item, i) => {
      return (
        <View
          key={List.name}
          style={{
            width: windowWidth,
            height: scale(100),
            paddingLeft: scale(10),
          }}>
          <TouchableOpacity onPress={() => {
            props.navigation.navigate('Screen2')
          }} activeOpacity={0.7}>
            <Text style={{ fontSize: 20 }}>{item.name}</Text>
          </TouchableOpacity>
        </View>
      );
    });
  };

render() {
  const props= this.props;
  return (
    <View style={{ top: scale(50) }}>
      <ScrollView style={{ height: windowHeight }}>
         { this.renderList (props) }
      </ScrollView>
    </View>
  );
}
}

snack expo working code

导航到另一个屏幕 - 'navigation.navigate' 不是函数

Navigate to another screen - 'navigation.navigate' is not a function

reactjs

react-native

react-native-navigation