Question

我有两个类：我的默认类 HomeScreen 用于主页，另一个类 MyList 用于在我的 HomeScreen上生成一个平面列表。我的问题是我没有成功在我的 MyList 类中构建我的导航功能。

我总是收到以下错误：＆＃34;无法找到变量：导航＆＃34;。

我看了一下Calling Navigate on Top Level Component，但我真的不知道如何在我的代码中实现它。

以下是我尝试的内容：

class MyList extends React.Component {

    _keyExtractor = (item, index) => item.note.id;

    _renderItem = ({ item }) => (
        <TouchableNativeFeedback
            onPress={() => navigate('Note', { noteId: item.note.id })} >
            <View>
                <Text style={styles.noteElementTitle} >{item.note.title}</Text>
                <Text style={styles.noteElementBody} >{item.note.body}</Text>
            </View>
        </TouchableNativeFeedback>
    );

    render() {
        return (
            <FlatList
                data={this.props.data}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        );
    }

}


export default class HomeScreen extends React.Component {

    static navigationOptions = {
        title: 'Notes',
        headerStyle: { backgroundColor: 'rgb(255, 187, 0)' },
        headerTitleStyle: { color: 'white' },
    };

    render() {

        const { navigate } = this.props.navigation;

        return (
                <MyList
                    data={this.state.data}
                    load={this.state.load}
                    navig={this.props.navigation}
                >
                </MyList>

        );
    }
}

const Project = StackNavigator({
    Home: { screen: HomeScreen },
    NewNote: { screen: NewNoteScreen },
    Note: { screen: NoteScreen }
});


AppRegistry.registerComponent('Project', () => Project);

感谢您的帮助。

Answer 1

由于您的MyList组件不属于您的堆栈，因此无法使用导航道具。

您有2个选项。

您可以手动将导航道具传递给MyList

的第一个选项

render() {
  const { navigate } = this.props.navigation;
  return (
    <MyList
      data={this.state.data}
      load={this.state.load}
      navigation={this.props.navigation}
    >
    </MyList>
  );
}

第二个选项，您可以使用withNavigation。

withNavigation是一个通过导航的高阶组件支撑成一个包裹的组件。当你无法通过时它很有用直接导航到组件中，或者不想传递它如果是一个深深嵌套的孩子。

import { Button } 'react-native';
import { withNavigation } from 'react-navigation';

const MyComponent = ({ to, navigation }) => (
    <Button title={`navigate to ${to}`} onPress={() => navigation.navigate(to)} />
);

const MyComponentWithNavigation = withNavigation(MyComponent);

React Native / React导航，相同级别的组件

1 个答案: