Реагировать на собственное переключение экрана с одного компонента на другой при нажатии кнопки - PullRequest
Новая
       23

Реагировать на собственное переключение экрана с одного компонента на другой при нажатии кнопки

0 голосов
/ 02 апреля 2020

Я новичок в реагировании на нативную среду, создаю базовое c приложение, которое не обнаружит случаев короны в каждой стране, поэтому я сделал 2 компонента в отдельном файле. как перейти с дочернего на дочерний компонент? Теперь я хочу переключаться между ними, когда нажимаю на кнопку с помощью стекового навигатора

Приложение. js

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Splash from './scenes/splash';
import Corona from './scenes/corona';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Splash">
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="Corona" component={Corona} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

spla sh. js

import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';

export default function splash({navigation}) {
    return (
            <View style={styles.container}>
                <Image 
                source={require('../assets/corona.jpg')} 
                resizeMode="cover" style={styles.img} />
                <Text style={styles.txt}>
                    Track the current status {"\n"} 
                    of the COVID-19 and{"\n"}
                    stay up to date.</Text>
                <Text 
                style={styles.btn}
                onPress={() => this.props.navigation.navigate('Corona')}
                >Continue</Text>
            </View>
    )
}

корона. js (перейдите сюда) 

import React from 'react'
import { StyleSheet, Text, View, Image, Button} from 'react-native';

export default function corona({navigation}) {
    return (
        <div>
            <View>
                <Text>Hello next screen</Text>
            </View>
        </div>
    )
}

1 Ответ

0 голосов
/ 02 апреля 2020

В spla sh. js

изменить 

 <Text style={styles.btn}
  onPress={() => this.props.navigation.navigate('Corona')}>Continue</Text>

на 

   <Text style={styles.btn}
  onPress={() => navigation.navigate('Corona')}>Continue</Text>

И в короне . js

Удалите <div> тегов взамен, Reaction-native не поддерживает теги Div

Надеюсь, это поможет!

...