Question

我有一个ListView组件中包含的元素列表。我的元素是用.json中的数据构建的。

我的列表屏幕是这样构建的：

ListBillScreen.js

    <View style ={styles.header}>
      <Text style = {styles.textHeader}> Vos Factures </Text>
    </View>

  <ListView
    style={styles.listView}
    dataSource={this.state.dataSource}
    renderRow={(data) => <Row {...data} />}
    renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
  />

  <View style = {styles.footer}>
  <TouchableHighlight onPress={this.goAdd.bind(this)}>
       <Image style={ styles.image } source={require('../Images/add_blue.png')}/>
  </TouchableHighlight>
  </View>
  <AndroidBackButton
    onPress={this.popIfExists.bind(this)}
  />

</ScrollView>
);

正如你所看到的，我在渲染行中有

行

renderRow={(data) => <Row {...data} />}

行引用

Row.js

import React from 'react';
import { View, Text, StyleSheet, Image, Alert, TouchableHighlight, Navigator} from 'react-native';

import styles from './Styles/RowStyles'

const Row = (props) => (
<TouchableHighlight onPress={() => Alert.alert("Redirection " + 
props.name)}>
 <View style={styles.container}>
  <Image source={{ uri: props.picture}} style={styles.photo} />
  <Text style={styles.text}>
   {`${props.name} / ${props.price} euros`}
  </Text>
 </View>
</TouchableHighlight>
);

export default Row;

而不是

{() => Alert.alert("Redirection " + props.name)}>

我想用函数重定向：

goAdd(){
  this.props.navigator.push({ screen: 'BillScreen' });
}

但是，如果这样做，我有一个错误，告诉我this.props.navigator在这种情况下不工作。但在其他课程中，我正在这样做，一切都很好。

有人有解决方案吗？谢谢大家！

Answer 1

您需要将navigator作为道具传递给Row.js

  <ListView
    style={styles.listView}
    dataSource={this.state.dataSource}
    renderRow={(data) => <Row {...data} navigator={this.props.navigator}/>}
    renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
  />

导航无法与ListView中的Rows一起使用

1 个答案: