如何将 React Native Navigation Stack 与 class 组件一起使用？

Question

我正在处理 React Native 项目，但在使用 React Native 导航堆栈时遇到问题。我之前使用过功能组件，但在这个特定项目中，我使用的是 class 组件，我不确定如何正确传递 props 来这样做。

我试图将 props 传递给我的构造函数并使用 props.navigation.navigate 但我收到了这个错误。

TypeError: undefined is not an object (evaluating '_this2.props.navigation.navigate')

我确定这是一个简单的修复，但我不确定如何将导航道具传递给这个 class。

render(){
  return (
    <View style={styles.NoChoresContainer}>
      <View style={styles.LogoPH}><AntDesign name="minussquareo" size={100} color="black" /></View>
      <View style={styles.NoChoresTextContainer}>
        <Text style={styles.NoChoresText}>You have no chores!</Text>
      </View>
      <TouchableWithoutFeedback style={styles.NoChoresTextContainer} onPress={() => this.props.navigation.navigate('AddChores')}>
        <Text style={styles.NoChoresButton}> 
          <AntDesign name="pluscircleo" size={20} style={styles.AddCircle} /> 
          Add a chore
        </Text>
      </TouchableWithoutFeedback>
    </View>
    
  );
    }

这也是我传递道具的方式

class NoChores extends Component{
  constructor(props) {
    super(props);
    this.state = {

    };
    
  }

这是我的堆栈导航器

<NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#FFA06A"
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerTitle: (props) => <Title></Title>,
        }}
      />
      <Stack.Screen
        name="AddChores"
        component={AddChores}
        options={{
          headerTitle: (props) => <Title>Add Chores</Title>,
        }}
      />

    </Stack.Navigator>
  </NavigationContainer>

Answer 1

好的，所以我的第一个组件已安装并且堆栈屏幕内部包含导航道具。从那里，我只需要通过道具将导航传递给渲染的每个组件，直到我最终到达我的目标组件。

第一个组件：

class Home extends Component{
  constructor(props) {
    super(props);
    this.state = {
      
    };
  }

    render(){
  return (
    <SafeAreaView styles={styles.Container}>
    <StatusBar style="auto" />
    <View>
    <Year nav={this.props}/>

    </View>
  </SafeAreaView>
    
  );
    }
}
export default Home;

下一个组件传递道具：

class Year extends Component{
  constructor(props) {
    super(props);
    dayShowing:<Day nav={this.props.nav} />,
    };
  }

如何将 React Native Navigation Stack 与 class 组件一起使用？

How do I use the React Native Navigation Stack with class components?

reactjs

react-native

react-native-navigation