reactjs - React Native：StackNavigator ....如何从 ListView 项目导航到另一个页面？

问题描述

我在这里找到了一个具有相同问题的主题，但解决方案对我不起作用。

所以我的 ScanTicketPage.js 上有一个 ListView。ListView 和位于 renderRow 函数中的 ListView 项上的 onPress 函数也可以正常工作。

但我的问题是，我无法导航到另一个名为 QrCode.js 的组件。这背后的故事是，我想点击列表项并打开一个 QrCode 扫描仪。

也许值得一提的是，我使用了一个绑定在 App.js 中的 TabNavigator，它也可以正常工作。

我所能看到的只是“按下”的警报，然后什么也没有发生。不是错误，没有警告。

    import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  ListView,
  TextInput,
  Button,
  AsyncStorage,
  Keyboard,
  TouchableHighlight,
  TouchableOpacity ,
  AppRegistry
} from 'react-native';

import{createStackNavigator} from 'react-navigation';
import QrCode from '../components/QrCode';




class ScanTicketPage extends Component {

    static navigationOptions = {
        title: 'Scanner List'
      };

constructor (props){
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    this.state={
        activatedScanners:'',
        dataListSource:ds
    }

    this.goToQrCodeScreen = this.goToQrCodeScreen.bind(this);
    this.renderRow = this.renderRow.bind(this);

}

...

    goToQrCodeScreen=(scanner)=>{
    alert('press');
    this.props.navigation.navigate('QrCode',{
        scannerName: scanner.scannerName,
        scannerValidityEnd: scanner.scannerValidityEnd,
        scannerId: scanner.scannerId,
        dataMacroId: scanner.dataMacroId,
        hash:scanner.hash,
        requestKey: scanner.requestKey,
        })
}

renderRow(scanner, sectionId, rowId, highlightRow){

    return(
            <View >
            <TouchableOpacity 
            onPress={()=>this.goToQrCodeScreen(scanner)}>
            <Text style={styles.listitem} >{scanner.scannerName} (gültig bis {scanner.scannerValidityEnd})</Text>
            </TouchableOpacity>
            </View>

    )
}

....

render(){

  return(
    <View style={styles.viewContent}>
       <Text> Bitte wählen Sie einen Scanner aus:</Text>


       <Text>{this.state.activatedScanners}</Text>

       <ListView
        dataSource={this.state.dataListSource}
        renderRow={this.renderRow}
        />
    </View>
  );
}

const StackNavigation = createStackNavigator(
    {
    ScanTicketPage:ScanTicketPage ,
    QrCode:QrCode
    },
    {
        initialRouteName: 'ScanTicketPage',
      }
  );


AppRegistry.registerComponent('StackNavigation',()=> StackNavigation);

标签： reactjsreact-nativereact-navigationstack-navigator

reactjs - React Native：StackNavigator ....如何从 ListView 项目导航到另一个页面？

问题描述

解决方案

推荐阅读