Stacknavigator Non navigazione verso nuova schermata durante l'utilizzo di componente funzionale

voti
0

Ecco il mio 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.jsha un annidata Wrap.jscomponente che a sua volta ha un Header.jscomponente in cui l' onPressevento viene gestito per caricare un nuovo schermo, in questo caso la Preload.jsschermata.

Quando premo il componente TouchableOpacity, non v'è alcun errore gettato ma non succede nulla neanche. Il nuovo schermo non viene caricato. Per favore fatemi sapere come caricare nuovi schermi durante l'utilizzo di componenti funzionali.

Ecco i rispettivi componenti sopra menzionati.

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
È pubblicato 24/10/2019 alle 12:54
fonte dall'utente
In altre lingue...                            

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