Stacknavigator nem navigál az új képernyő használata közben a funkcionális összetevő

szavazat
0

Itt az én 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.jsvan egy beágyazott Wrap.jskomponens, ami viszont egy Header.jselemet, ahol az onPressesemény kezelése betölteni egy új képernyő, ebben az esetben a Preload.jsképernyőn.

Amikor megnyomom a TouchableOpacity komponens, nincs hiba dobni, de nem történik semmi sem. Az új képernyő nem töltődik be. Kérem, tudassa velem, hogyan kell betölteni új képernyők használata közben funkcionális elemek.

Itt vannak a megfelelő komponenseket a fent említett.

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
A kérdést 24/10/2019 12:54
a forrás felhasználó
Más nyelveken...                            

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