Question

这是我的App.js

import React, {Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import {Provider} from 'react-redux';
import {createStore} from 'redux';

import Reducers from './app/reducers';

import Preload from './app/Screens/Preload';
import HomeScreen from './app/Screens/HomeScreen';

let store = createStore(
  Reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const AppNavigator = createStackNavigator({
  Home: {screen: HomeScreen, navigationOptions: {header: null }},
  Preload: {screen: Preload, navigationOptions: {header: null }},
});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends Component {
  render () {
    return (
        <Provider store={store}>
          <AppContainer/>
        </Provider>
    )
  }
}

HomeScreen.js具有嵌套的Wrap.js组件，而嵌套的Header.js组件又具有onPress组件，其中处理Preload.js事件以加载新屏幕，在这种情况下为{{ 1}}屏幕。

当我按下TouchableOpacity组件时，没有引发任何错误，但是也没有任何反应。新屏幕不会加载。请让我知道如何在使用功能组件时加载新屏幕。

以下是上述各个组成部分。

Wrap.js

import React from 'react'
import { View, Text, StyleSheet, StatusBar, Platform, SafeAreaView, ScrollView } from 'react-native'
import Colors from '../../Constants/Colors'
import Header from './Header'

const Wrap = (props) => {
  return (
    <SafeAreaView style={styles.mainWrapper}>
      <ScrollView>
        <Header />
        {props.children}
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  mainWrapper: {
    backgroundColor: Colors.orange,
    height: "100%",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

  }
})

export default Wrap

Header.js

import React from 'react'
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
import { FontAwesome } from '@expo/vector-icons';
import SourceImages from '../../Constants/SourceImages'
import Colors from '../../Constants/Colors'
import { NavigationActions } from 'react-navigation';

const {navigate} = NavigationActions;

const Header = () => {
  return (
    <View style={styles.wrapper}>
      <View style={styles.menuIconWrapper}>
        <TouchableOpacity style={styles.iconWrapper}
          onPress={()=>{navigate('Preload')}}

        >
          <FontAwesome name="navicon" style={styles.icon} />
        </TouchableOpacity>
      </View>
      <View style={styles.logoWrapper}>
        <Image style={styles.logo} source={ SourceImages.logo } resizeMode="contain" />
      </View>
      <View style={styles.cartIconWrapper}>
        <TouchableOpacity style={styles.iconWrapper} >
          <FontAwesome name="shopping-basket" style={styles.icon} />
        </TouchableOpacity>
      </View>
    </View>
  )
}


export default Header

Answer 1

您必须按照以下方式进行操作：

1-从“反应导航”而不是NavigationActions中导入{withNavigation}

2-使用const Header =（props）代替const Header =（）

3-使用props.navigation代替const {navigate} = NavigationActions;

4-使用Navigation（Header）导出默认标题，而不是导出默认标题

它将以这种方式工作：

import { withNavigation } from  'react-navigation'


const Header = (props)


props.navigation.navigate('Preload')


export default withNavigation(Header)

使用功能组件时，Stacknavigator无法导航到新屏幕

1 个答案: