时间戳

首页 > 解决方案 > 单击列表视图项目不会转到下一页

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

问题描述

我的页面上有一个 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 不会将我带到下一页。

任何帮助将不胜感激。

标签： reactjsreact-native

解决方案

我无法准确地发现您的问题，因为代码片段不完整，但我创建了一个可能对您有所帮助的示例（您可以在它之上构建）：

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;

推荐阅读