Question

我的页面上有一个listView。当用户单击列表视图上的一项时，我想转到下一页。我的ListView中有以下代码

<ListView

            dataSource={this.state.dataSource}
            renderRow = {( rowData, sectionId, rowId ) =>

              {
                        return (
                          <View style={{backgroundColor: '#DDBC95'}}>
                          <TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind( this, rowData ) }>
                              <Text style = { styles.text }>{ rowData.ser }</Text>
                            </TouchableOpacity>
                            </View>

                        );
              }

          }

          renderSeparator = {() =>
            <View style = { styles.separator }/>
        }

        enableEmptySections = { true }

          />

clickedItemText中包含以下代码

  clickedItemText( clickedItem )
    {
        this.props.navigation.navigate('Item', { item: clickedItem }   );
    }

我将数据放入componentDidMount（）

componentDidMount() {

        const data = require('../reducers/services.json')



            let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
            this.setState({
              Loading_Activity_Indicator: false,
              dataSource: ds.cloneWithRows(data),
            }, function() {

              // In this block you can do something with new state.
              this.arrayholder = data ;
            });


      }

我还有一个stackNavigator可以转到下一页。以下是该代码：

   const TestActivity=   StackNavigator(
    {
       First :   {screen: newMissionActivity, navigationOptions:{header:null}},
      Item: {screen: ServiceListDetails, navigationOptions:{header:null}},
    }

    );

单击ListView的每个项目都不会将我带到下一页。

我们将不胜感激任何帮助。

Answer 1

由于代码段不完整，所以我无法确切地发现您的问题，但是我创建了一个示例，可能会为您提供帮助（您可以在上面进行构建）：

import React, {Component} from 'react';
import {
  View,
  Text,
  ListView,
  TouchableOpacity
} from 'react-native';
import { createStackNavigator } from 'react-navigation';

class SecondScreen extends Component {
  render() {
    return (
        <Text>{this.props.navigation.getParam('item', '')}</Text>
    )
  }
}

class FirstScreen extends Component {
  constructor(props) {
    super(props);
    const data = [
      {ser: 'First item'},
      {ser: 'Second item'},
      {ser: 'Third item'},
    ]
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(data)
    }
  }

  clickedItemText = (clickedItem) => {
    console.log('clickedItem', clickedItem);
    this.props.navigation.navigate('Second', {item: clickedItem.ser});
  }

  render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => (
                <View>
                  <TouchableOpacity
                      activeOpacity={0.4}
                      onPress={() => this.clickedItemText(rowData)}
                  >
                    <Text>{rowData.ser}</Text>
                  </TouchableOpacity>
                </View>
            )}
        />
    );
  }
}

const App = createStackNavigator(
    {
      First: {screen: FirstScreen, navigationOptions: {header: null}},
      Second: {screen: SecondScreen, navigationOptions: {header: null}},
    }
);

export default App;

Answer 2

@naoufal给出的代码似乎足够好。您能否在此处粘贴错误，以便我们提供帮助。

ListView也为deprecated，请改用FlatList。参考：What's the difference between ListView and FlatList?

单击列表视图项不会转到下一页

2 个答案: