Блог

Главная - Вопросы по программированию - Навигатор стека React Native — переход на другую страницу

Навигатор стека React Native — переход на другую страницу

#javascript #css #react-native

#javascript #css #react-native

Вопрос:

Я новичок в react native и пытаюсь заставить свою кнопку перейти на страницу регистрации. Первоначально у меня было onPress в коде GetStartedButton, но недавно я попытался поместить его в фактический welcome.js страница, рассматривающая ее, может видеть отображаемый навигатор из стека. Кажется, я не могу понять, как заставить мою кнопку направить меня на нужную страницу! Любая информация очень ценится! Спасибо.

Я получаю сообщение об ошибке, что он не может найти навигацию в строке 23 GetStartedButton.js и это указывает на набор круглых скобок сразу после onPress

App.js

 import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import WelcomePage from './src/pages/Welcome';
import SignUpEmailPage from './src/pages/SignUpEmail'

import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();


export default class App extends Component {
 
  createHomeStack = () =>
  <Stack.Navigator>
    <Stack.Screen name="Welcome" component= {Welcome}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmail}/>
  </Stack.Navigator>
 
  render() {
    return (
      <View style={styles.welcomeScreen}>
       <WelcomePage/>
      </View>


    )
  }
}

const styles = StyleSheet.create({
  welcomeScreen: {
    flex: 1,
    backgroundColor: 'black'  
  },
  signupemailScreen: {
    flex: 1,
    backgroundColor: '#272933' 

  }
}
);

GetStartedButton.js <- Просто кнопка

 import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Animated  } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default class GetStartedButton extends Component {
  
    constructor(props) {
      super(props)
  
      this.fadeAnimation = new Animated.Value(0)
    }
    componentDidMount() {
        Animated.timing(this.fadeAnimation, {
          toValue: 1,
          duration: 5000,
          useNativeDriver: true,      
        }).start()
      }

    render(){
        return(
        <Animated.View style={[styles.container, { opacity: this.fadeAnimation}]}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('SignUpEmail')} >
            <LinearGradient   
                 
            colors={['#DB004C','#FC008E']}
            style={styles.linearGradient}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}
            >
              
                <Text style={styles.text}>
                    Get Started
                </Text>     
               
             </LinearGradient>
        </TouchableOpacity>
        </Animated.View>
    )
    
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        
    },
    linearGradient: {
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
        width: 340,
        padding: 20,
    },

    text: {
        color: 'white',
        fontSize: 20,
        justifyContent: 'center',
    alignItems: 'center',
    }
});

Welcome.js <— страница, на которой расположена кнопка getstarted

 import { createStackNavigator } from '@react-navigation/stack';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Animated, TouchableOpacity} from 'react-native';
import GetStartedButton from '../components/GetStartedButton';



export default class WelcomePage extends Component {
  
  constructor(props) {
    super(props)

    this.fadeAnimation = new Animated.Value(0)
  }

  componentDidMount() {
    Animated.timing(this.fadeAnimation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,      
    }).start()
  }
  
  render() {
    return (
        <View style={styles.containerMain}>
        <View style={styles.containerClub}>
        <Animated.Text style={[styles.title, { opacity: this.fadeAnimation}]}>Word</Animated.Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Animated.Text style={[styles.caption, { opacity: this.fadeAnimation}]}> words words words  </Animated.Text> 
      </View>
          
      <View style={styles.containerBottom}>   

        
      
          <GetStartedButton/>
         
        

        
      </View>
    </View>

    );
    }
}



const styles = StyleSheet.create({
    containerMain: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black',
    },

containerClub: {
    position: 'absolute',
    bottom: 288
  },

  containerCaption: {
    position: 'absolute',
    bottom: 250

  },
  /* To style the button and positioning*/
  containerBottom: {
    
    position: 'absolute',
    bottom: 100
  },
  /* To style "Word"*/
  title: {
    color: 'white',
    fontSize: 35,
    fontWeight: "bold",

  },
  /* To style "Words words words"*/
  caption:
  {
   color: 'white',
    fontSize: 16
  },
  line: {
    borderWidth: 0.5,
    borderColor:'black',
     margin:10,
  }
}
)

Ответ №1:

Конечный результат:

введите описание изображения здесь

Внесите следующие изменения :

App.js:

 import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import WelcomePage from './WelCome';
import SignUpEmailPage from './Signup';

const Stack = createStackNavigator();

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Welcome" component={WelcomePage} />
          <Stack.Screen name="SignUpEmail" component={SignUpEmailPage} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Welcome.js ::

 import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableOpacity,
} from 'react-native';
import GetStartedButton from './GetStartedButton';

export default class WelcomePage extends Component {
  constructor(props) {
    super(props);

    this.fadeAnimation = new Animated.Value(0);
  }

  componentDidMount() {
    Animated.timing(this.fadeAnimation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <View style={styles.containerMain}>
        <View style={styles.containerClub}>
          <Animated.Text
            style={[styles.title, { opacity: this.fadeAnimation }]}>
            Word
          </Animated.Text>
        </View>

        <View style={styles.containerCaption}>
          <Animated.Text
            style={[styles.caption, { opacity: this.fadeAnimation }]}>
            words words words
          </Animated.Text>
        </View>

        <View style={styles.containerBottom}>
          <GetStartedButton
            onPress={() => this.props.navigation.navigate('SignUpEmail')}
          />
        </View>
      </View>
    );
  }
}

GetStartedButton.js:

 import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Animated } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default class GetStartedButton extends Component {
  constructor(props) {
    super(props);

    this.fadeAnimation = new Animated.Value(0);
  }
  componentDidMount() {
    Animated.timing(this.fadeAnimation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <Animated.View
        style={[styles.container, { opacity: this.fadeAnimation }]}>
        <TouchableOpacity
          onPress={() => {
            this.props.onPress();
          }}>
          <LinearGradient
            colors={['#DB004C', '#FC008E']}
            style={styles.linearGradient}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}>
            <Text style={styles.text}>Get Started</Text>
          </LinearGradient>
        </TouchableOpacity>
      </Animated.View>
    );
  }
}

Вот рабочая демонстрационная демонстрация Expo Snack.

Комментарии:

1. Потрясающе! Я действительно ценю помощь, как бы мне отредактировать белую полосу вверху? Я искал в Google в течение 10 минут, но, похоже, не могу найти никакой хорошей информации. Не могли бы вы указать мне направление, где я мог бы найти, как это сделать? Спасибо

2. что вы хотите сделать с этой белой строкой состояния?

3. вот хорошая статья о том, как вы можете ее настроить: aboutreact.com /…

4. Эта статья — золото. Ты мужчина! Спасибо

5. Добро пожаловать, и отличная работа со стилем приложения. Выглядит гладко.

Ответ №2:

Вы создали стек, но не отобразили его в App.js . Вместо этого вы отображаете страницу приветствия напрямую, добавляя созданный метод stack to return:

 export default class App extends Component {
 
  createHomeStack = () =>
  <Stack.Navigator>
    <Stack.Screen name="Welcome" component= {Welcome}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmail}/>
  </Stack.Navigator>
 
  render() {
    return (
      <View style={styles.welcomeScreen}>
       {this.createHomeStack()}
      </View>


    )
  }
}
Метки: