Stacknavigator nu de navigație la ecran nou în timp ce utilizați componenta funcțională

voturi
0

Iată meu 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.jsare o imbricate Wrap.jscomponentă care , la rândul său , are o Header.jscomponentă în cazul în care onPressevenimentul este manipulat pentru a încărca un ecran nou, în acest caz Preload.jsecranul.

Când apăs componenta TouchableOpacity, nu există nici o eroare de aruncat, dar nu se întâmplă nimic, fie. Noul ecran nu se încarcă. Vă rog să-mi spuneți cum să încărcați noi ecrane în timp ce folosind componente funcționale.

Aici sunt componentele respective menționate mai sus.

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
Întrebat 24/10/2019 la 12:54
sursa de către utilizator
În alte limbi...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more