Question

////////////这是主屏幕，在这里我尝试转到“组件”。无法识别“ props.navigation.navigate

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

const HomeScreen = props => {
  return (
    <View>
      <Text style={styles.text}>Hi there !</Text>
        <Button
          onPress={() => props.navigation.navigate('Components')}
          title="Go to Componetes demo"
        />
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30
  }
});

export default HomeScreen;

//////////这是我正在使用主屏幕的index.js。

import React from 'react';
import { AppRegistry,View } from 'react-native';
import HomeScreen from './src/screens/HomeScreen';
import ListScreen from './src/screens/ListScreen';
import ComponentsScreen from './src/screens/ComponentsScreen';
import Header from './src/screens/Header';

const App = () => {
  return(
    <View style={{ flex: 1 }}>
      <Header headerText={'Hello ! '}/>
      <HomeScreen />
    </View>
  );
};




AppRegistry.registerComponent('Tal', () => App);

这是App.js，导航器在这里。这已被编辑。我需要帮助。////////////////////////////////////////////// /

///// ########### ///////////

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { createStackNavigator } from 'react-navigation-stack';
import {  createAppContainer } from 'react-navigation';

const navigator = createStackNavigator (
{
  Home : HomeScreen,
  Components : ComponentsScreen,
  List : ListScreen
},
{
  initialRouteName : 'Home',
  defaultNavigationoptions :  {
    title : App
  }
}
);

export default createAppContainer(navigator);

Answer 1

首先，您需要了解如何在组件内部使用navigation作为道具。

应用程序中的每个screen组件都会自动提供导航道具。重要的是要突出显示导航道具没有传递到 all 组件中；只有 screen 组件会自动收到此道具！ 反应导航在这里没有任何神奇之处。例如，如果要定义一个MyBackButton组件并将其呈现为屏幕组件的子级，则将无法访问其上的 navigation 道具。但是，如果您希望访问任何组件中的导航道具，则可以使用withNavigation HOC。

Answer 2

请从您要介绍homeScreen的屏幕上通过导航道具。它没有导航功能，这就是它引发错误的原因。

未定义不是对象（评估'props.navigation.navigate'）

2 个答案: