Реагируйте на собственную навигацию между двумя экранами - PullRequest
Новая
       29

Реагируйте на собственную навигацию между двумя экранами

0 голосов
/ 05 января 2019

В React Native мне нужно перейти с экрана на другой экран. Но я не понял концепции для этого. Итак, я сделал следующее:

В App.js 

import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {StyleSheet, Text, Alert, View} from 'react-native';
import { Container, Header, Content, Button} from 'native-base';
import { createStackNavigator, createAppContainer } from 'react-navigation';


type Props = {};
export default class App extends Component<Props> {
ShowAlertDialog = () =>{

Alert.alert(

  // This is Alert Dialog Title
  'Lopels',

  // This is Alert Dialog Message. 
  'Welcome to Lopels',
  [
    // First Text Button in Alert Dialog.
    {text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},

    // Second Cancel Button in Alert Dialog.
    {text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},

    // Third OK Button in Alert Dialog
    {text: 'OK', onPress: () => console.log('OK ButtonPressed')},

  ]

)

}
render() {
return (
  <Container>
  <LinearGradient colors={['#007991', '#78ffd6']} style={styles.linearGradient}>
    <Text style={styles.logoText}>
      Lopels
    </Text>
    <Text style={styles.tagText}>
      The Complete Loyalty Platform
    </Text>
    <Button style={styles.button} onPress={this.ShowAlertDialog}>
        <Text style={styles.buttonText}>Get Started</Text>
    </Button>
  </LinearGradient>
  </Container>
);
}
}

const styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 5,
paddingRight: 5,
},

  logoText: {
    fontSize: 50,
    fontFamily: 'Graceland',
    textAlign: 'center',
    marginTop: 170,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
  tagText:{
    fontSize:15,
    letterSpacing: 3,
    fontFamily:'Actor',
    textAlign: 'center',
    color: 'black',
    backgroundColor: 'transparent',
  },
  button:{
    marginLeft: '15%',
    marginTop: '8%',
    width:250,
    borderRadius: 10,
    backgroundColor:'#ffffff',
    borderColor: "transparent",
  },
  buttonText:{
    marginTop: '8%',
    marginLeft: '35%',
    fontFamily: 'Actor',
    color: '#282828',
    fontSize: 18,
  }
});

А папка другого экрана находится в папке ./src/Login Screen / index.js

Мне нужно перейти к экрану входа в систему после нажатия кнопки «Начать» в App.js

1 Ответ

0 голосов
/ 06 января 2019

Запись приложения - App.js, который импортируется в index.ios.js

index.ios.js 

import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import App from './component/stackScreens/App';

AppRegistry.registerComponent('reactNav', () => App);

В App.js StackNavigator импортируется. App.js - это стек, в котором есть все компоненты, необходимые для вашей навигации.

App.js 

import React from 'react';

import { StackNavigator } from 'react-navigation';
import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';
import ScreenThree from './ScreenThree';

const App = StackNavigator({
    ScreenOne: { screen: ScreenOne},
    ScreenTwo: { screen: ScreenTwo},
    ScreenThree: {screen: ScreenThree}
})

export default App;

ScreenOne.js 

class ScreenOne extends Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <View style={styles.container}>
        <TouchableHighlight
          onPress={() => navigate("ScreenTwo")}
          style={styles.button}>
          <Text
            style={styles.buttonText}>Screen One </Text>
        </TouchableHighlight>
      </View>
    );
  }
};

const {navigate} = this.props.navigation: указывает экран для навигация.

...