React Native：导航在组件中不起作用

Question

我无法使用 List Component.js 文件中的 On Press 方法打开第三页屏幕。我不明白这个问题。我想知道我做错了什么。问题出在哪里？谢谢你。请帮忙

感谢您的回复，但这行不通，我的朋友。我已经更新了 ListComponent.js 文件。 ListComponent.js 文件实际上是一个列表。请你再看一遍。？

App.js

import React, { Component } from 'react';
import {
  WebView,
  AppRegistry, StyleSheet, Text, View, Button
} from 'react-native';

import { StackNavigator } from 'react-navigation';

import ListComponent from './ListComponent';




 class App extends Component {

  static navigationOptions =
  {
     title: 'App',
  };

  OpenSecondActivityFunction = () =>
  {
     this.props.navigation.navigate('Second');

  }

  render() {
    return (
      <View style={styles.container}>

       <Button onPress = { this.OpenSecondActivityFunction } title = 'Open Second Activity'/>
      </View>
    );
  }
}


 class SecondActivity extends Component
{
  static navigationOptions =
  {
     title: 'SecondActivity',
  };

     OpenThirdActivityFunction = () =>
  {
     this.props.navigation.navigate('Third');

  }

  render()
  {
     return(


            <View style={{  flex: 1}}>
            <ListComponents data={alapinCtrl} OpenThirdActivityFunction={this.OpenThirdActivityFunction} />
        </View>

     );
  }
}





 class ThirdActivity extends Component
{
  static navigationOptions =
  {
     title: 'ThirdSecondActivity',
  };

  render()
  {
     return(


            <View style={{  flex: 1}}>

             <Text>3</Text>

        </View>

     );
  }
}


export default ActivityProject = StackNavigator(
{
  First: { screen: App },

  Second: { screen: SecondActivity },

  Third: { screen: ThirdActivity }
});

const styles = StyleSheet.create({


  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },ActivityNameTextCss:
  {
     fontSize: 22,
     color: 'black',
     textAlign: 'center',
  },

});

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

列表Component.js

 import React, { Component } from "react";
    import {AppRegistry,View, Text, FlatList, ActivityIndicator} from "react-native";
    import { List, ListItem, SearchBar } from "react-native-elements";


    class ListComponents extends Component {
      constructor(props) {

        super(props);

        this.state = {
          loading: false,
          data: [],
          page: 1,
          seed: 1,
          error: null,
          refreshing: false
        };
      }


       renderSeparator = () => {
        return (
          <View
            style={{
              height: 1,
              width: "98%",
              backgroundColor: "#CED0CE",
              marginLeft: "2%"
            }}
          />
        );
      };

      renderHeader = () => {
        return <SearchBar placeholder="Type Here..." lightTheme round />;
      };

      renderFooter = () => {
        if (!this.state.loading) return null;

        return (
          <View
            style={{
              paddingVertical: 20,
              borderTopWidth: 1,
              borderColor: "#CED0CE"
            }}
          >
            <ActivityIndicator animating size="large" />
          </View>
        );
      };

        render()  {
            return (

            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
            <FlatList 
                data={this.props.data}
                renderItem={({ item }) => (
                <ListItem
                    roundAvatar
                    title={`${item.name}`}
                    subtitle={item.coders}

                    containerStyle={{ borderBottomWidth: 0 }}

  onPress={() => this.props.OpenThirdActivityFunction(item.coders)}
                />
                )}
                keyExtractor={item => item.coders} 
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
                ListFooterComponent={this.renderFooter}
            />
            </List> 
            );
        }
      }


     export default ListComponents;

Answer 1

只有SecondActivity有navigation道具；您需要将其显式传递给子组件：

<ListComponent navigation={this.props.navigation} />

或者，

<ListComponent onPress={() => this.props.navigation.navigate('Third')} />;

然后在 ListComponent 中执行 <Button onPress={this.props.onPress}。

React Native：导航在组件中不起作用

React Native: Navigation not working in component

react-native

react-native-navigation