Question

我一直在使用create-react-native-app创建的默认标签项目。

因此，我创建了自己的屏幕，在主（导出默认类）组件中可以访问this.props.navigation。从标题为“默认导航”的按钮进行导航（“搜索”）效果很好。

但是，经过多次尝试，我无法从headerRight中的按钮或自定义组件MyComponent中导航。

如何更改警报以改为像主要组件一样导航（'Search'）？

import React from 'react';
import { Button, Dimensions, ScrollView, StyleSheet, Text, View } from 'react-native';

class MyComponent extends React.Component {
    // i wish i could navigate from here
    render() {
        //const { navigate } = this.props.navigation; // this causes TypeError undefined is not an object (evaluating this.props.navigation.navigate)
        return (
        <View>
            <Button title="nav from component" onPress={() => alert('This should navigate, not alert')} color="red" />
        </View>
        );
    }
}

export default class MyScreen extends React.Component {
  // i wish i could navigate from here too
  static navigationOptions = {
    title: 'Test',
    headerRight: (
        //<Button onPress={() =>navigate('Search')} /> // how do I achieve this?
        <Button title="nav from header" onPress={() => alert('This should navigate, not alert')} />
    ),
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <ScrollView style={styles.container}>
        <Button onPress={() =>navigate('Search')} title="nav default" />
        <MyComponent />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
  },
});

Answer 1

有两个不同的问题。首先，导航仅作为道具传递给作为导航屏幕的组件。因此，要从其他组件（例如MyComponent）访问它，必须通过道具<MyComponent navigation={navigation} />传递它，然后可以在其中使用this.props.navigation.navigate。您也可以使用withNavigation高阶组件，但是在那种情况下，第一种方法更好。另一个问题是，如果要访问navigationOptions中的导航道具，则应将其定义为函数而不是对象。实现将是这样的：

static navigationOptions = ({ navigation }) => ({
  title: 'Test',
  headerRight: (
    <Button onPress={() =>navigation.navigate('Search')} />
  ),
});

如何访问主要组件之外的导航？

1 个答案: