Stacknavigator δεν πλοήγηση στη νέα οθόνη κατά τη χρήση λειτουργικό συστατικό

ψήφοι
0

Εδώ είναι μου 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οθόνη.

Όταν πατάω το στοιχείο 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
Δημοσιεύθηκε 24/10/2019 στις 12:54
πηγή χρήστη
Σε άλλες γλώσσες...                            

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