React Native: StackNavigator .... как перейти от элемента ListView к другой странице? - PullRequest
Новая
       46

React Native: StackNavigator .... как перейти от элемента ListView к другой странице?

0 голосов
/ 08 июня 2018

Я нашел здесь тему с той же проблемой, но решения не работают для меня.

Так что у меня есть ListView на моем ScanTicketPage.js.Отлично работает ListView, а также функция onPress для элемента ListView, который находится в функции renderRow.

Но моя проблема в том, что я не могу перейти к другому компоненту, который называется QrCode.js.Дело в том, что я хочу нажать на элемент списка и открыть сканер QrCode.

Может быть, важно упомянуть, что я использую TabNavigator, который привязан в App.js, который также отлично работает.

Все, что я могу видеть, это предупреждение с «нажатие» итогда ничего не происходит.Не ошибка, без предупреждения. 

    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);

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Работает.Мне пришлось изменить 

export default ScanTicketPage;

на 

export default StackNavigation;

в ScanTicketPage.js.

Спасибо MD Aslam Ansari за подсказку, что ListView запрещен.Я изменю это позже.

0 голосов
/ 08 июня 2018

"ListView" запрещен.Используйте "FlatList" или "SectionList".

Попробуйте использовать приведенный ниже код. 

const StackNavigation = StackNavigator(
    {
    ScanTicketPage:  {screen: ScanTicketPage} ,
    QrCode:  {screen: QrCode},
    },
    {
        initialRouteName: 'ScanTicketPage',
      }
  );
...