Question

是本机和移动应用程序的新功能。我正在尝试构建一个基本的购物应用程序。我拥有板球，足球，网球等运动选项，每当按下板球按钮时，都必须显示板球产品，我可以在其他两种产品上进行跟踪操作

我尝试使用堆栈导航器在屏幕之间导航，但似乎出现错误。我尝试使用createstacknavigator，但结果不正确

1.App.js

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


import { StackNavigator } from 'react-navigation'
import FirstScreen from './src/FirstScreen'
import SecondScreen from './src/cricket'

const Navigation = StackNavigator({
  First: {screen: FirstScreen},
  Second: {screen: SecondScreen}
});

export default Navigation

AppRegistry.registerComponent('AwesomeProject', () => Navigation);

2.FirstScreen.js

import React, { Component } from 'react';
import { Alert, AppRegistry, Image, Platform, StyleSheet, Text, 
TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, 
TouchableWithoutFeedback, View } from 'react-native';
import { StackNavigator } from 'react-navigation'
export default class FirstScreen extends Component {
//_onPressButton() {
// Alert.alert('You tapped the button!')
//}

//_onLongPressButton() {
//Alert.alert('You long-pressed the button!')
//}

  static navigationOptions = {
      title: 'First Screen',
  };


  render() {
    return (
      <View style={styles.container}>
         <TouchableOpacity onPress={this._onPressButton}>

     <View style={styles.button}>
        <Text style={styles.buttonText}>Cricket</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity onPress={this._onPressButton}>

     <View style={styles.button}>
        <Text style={styles.buttonText}>Football</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity onPress={this._onPressButton}>

     <View style={styles.button}>
        <Text style={styles.buttonText}>Tennis</Text>
      </View>
    </TouchableOpacity>
   </View>
    );
    }
    }   






   const styles = StyleSheet.create({
     container: {
      paddingTop: 60,
      alignItems: 'center'
      },
   button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
     },
  buttonText: {
    padding: 20,
    color: 'white'
    }
    });

    // skip this line if using Create React Native App
    //AppRegistry.registerComponent('AwesomeProject', () => Touchables);

3.Cricket.js

   import React, { Component } from 'react';
   import {Alert, Button, ScrollView, StyleSheet, AppRegistry, Text, View 
   } from 'react-native';

   const styles = StyleSheet.create({
   rowContainer: {
   flex: 1,
   height: 75,
   width: '100%',
   flexDirection: 'row', // children will be on the same line
   justifyContent: 'space-between',
   alignItems: 'center',
   margin: 10,
   },
   buttonContainer: {
   flex: 1,
   },
   text: {
    flex: 2, // Text takes twice more space as button container
   color: 'red',
   fontWeight: 'bold',
   fontSize: 20,
   },
   });


 class Greeting extends Component { 

  static navigationOptions = {
    title: 'Second Screen',
  };

 _onPressButton() {
 Alert.alert('Sorry you have no credit!')
 }

 render() {
   return (
  <View style={styles.rowContainer}>
    <Text style={styles.text}>{this.props.name}</Text>
    <View style={styles.buttonContainer}>
      <Button
        onPress={this._onPressButton}
        title="BUY"
      />
    </View>
  </View>
 );

 }
 }

 export default class SecondScreen extends Component {



 render() {
 return (
  <ScrollView>
  <View style={{alignItems: 'flex-start', top: 0, flex: 2, 
  backgroundColor: 'black'}}>

    <Greeting name='Shoe- 800' />
    <Greeting name='Jersey - 350' />
    <Greeting name='Stockings - 100' />
    <Greeting name='Cones - 50' />
    <Greeting name='Whistle - 80' />
    <Greeting name='Helmet - 750' />
    <Greeting name='Tennis Ball-6 pack - 800' />
    <Greeting name='Nets - 1500' />
    <Greeting name='Leg Pads - 1000' />
    <Greeting name='Stumps - 800' />
    <Greeting name='Gloves - 600' />
  </View>
  </ScrollView>
  );
  }
  }

按下板球按钮时，屏幕应导航到板球产品列表，即（cricket.js）

Answer 1

使用“移动屏幕”命令。

this.props.navigation.navigate("Second")

Answer 2

使用react-navigation时，只需使用导航道具。您已评论了处理压力机的部位。只需更改该功能即可实际导航到所需的屏幕：

_onPressButton=()=>{
    this.props.navigation.navigate("Second")
}

如果不使用箭头功能，则需要绑定该功能才能访问该屏幕的this。为此，您需要在构造函数中添加

：

constructor(props){
    super(props)
    this._onPressButton.bind(this)
}

之后，您可以通过以下方式调用它：

_onPressButton() {
 this.props.navigation.navigate("Second")
}

在使用stackNavigator时，您可以通过不同的方式导航到同一堆栈的另一个屏幕。您有不同的导航方式。例如：

this.props.navigation.push("Second")

此方法将新屏幕推入堆栈，无论它是什么屏幕

this.props.navigation.navigate("Second")

导航到堆栈中的新屏幕，仅当之前未聚焦屏幕时才将其推入堆栈中

this.props.navigation.replace("Second")

这将导航到一个新屏幕，而无需将其推入堆栈，用新屏幕“替换”您正在观看的屏幕。

编辑。

对于您在评论中指出的错误，这是因为没有应用容器。为此，请执行以下操作：

import { createStackNavigator, createAppContainer } from 'react-navigation'

然后做

 const Navigation = createAppContainer(createStackNavigator({
  First: {screen: FirstScreen},
  Second: {screen: SecondScreen}
}));

如何在购物应用程序的屏幕之间导航？

2 个答案: