导航不适用于ListView中的行

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} />} 
    />