Question

我正在尝试在我的js页面上使用ListView，而我的屏幕上没有数据。屏幕完全是空白的。下面是空屏幕的图像。我正在收到警告。

下面是我调用ListView的代码：

   import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: 353,
    flexWrap: 'wrap',
    paddingTop: 20,
    paddingLeft: 20,
  },
});


const store = createStore(reducers);

class AutoCompActivity extends Component {
  componentWillMount() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });
    this.dataSource = ds.cloneWithRows(this.props.services);
  }
  render() {
    return (
        <Provider store={store}>
          <View style={styles.container}>
            <ListView 
          enableEmptySections={true}
          dataSource={this.dataSource}
          renderRow={(rowData) => 
            <ServiceItem services={rowData} />
          }
        />
      </View>
      </Provider>
    );
  }
}

const mapStateToProps = state => {
  return { services: state.services };
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);


const app1 = () => (
  <Provider store={store}>
    <ConnectedAutoCompActivity />
  </Provider>
)

export default app1;

我的ServiceItem.js文件如下：

 import React from 'react';

import { StyleSheet, Text, View, Button, ImagePropertiesAndroid } from 'react-native';
import {connect} from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import Icon from 'react-native-vector-icons/EvilIcons';
import * as actions from '../actions';


const theme = getTheme();
const styles = StyleSheet.create({
    card: {
      marginTop: 20,
    },
    title: {
        top: 20,
        left: 80,
        fontSize: 24,
    },
    image: {
        height: 100,
    },
    action: {
        backgroundColor: 'black',
        color: 'white',
    },
    icon: {
        position: 'absolute',
        top: 15,
        left: 0,
        color: 'white',
        backgroundColor: 'rgba(255,255,255,0)',
    },
  });


   const ServiceItem=(props)=>{
   return(
        <View>
                 <Text style={[theme.cardTitleStyle, styles.title]}>{props.services.services}</Text>


        </View>


     )

   }

   export default connect(null, actions)(ServiceItem);

我的Json文件非常简单：

    [
  {
    "services": "Test1"
  },

  {
    "services": "Test2"
  },
  {
    "services": "Test3"
  },
    {
    "services": "Test4"
  },
    {
    "services": "Test4"
  }

  ]

我的服务.Reducer有以下代码：

    import services from './services.json';

const initialState = {
    services
};

export default (state = initialState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

我多次检查了我的代码，找不到任何问题。我还安装了react redux。 Store在我的代码中定义为const。我只是想把每个服务都显示为为test1，我手机上的test2

非常感谢任何帮助。

Answer 1

此处的问题是您在连接组件中使用Provider 。

连接的组件应该包含在<Provider>内。用以下内容替换您的代码，它将按预期工作。

import React, { Component } from 'react'; import { Text, View, StyleSheet, ListView } from 'react-native'; import { Provider, connect } from 'react-redux'; import { createStore } from 'redux' import reducers from '../reducers/ServiceReducer'; import ServiceItem from './ServiceItem'; const styles = StyleSheet.create({ container: { flex: 1, width: 353, flexWrap: 'wrap', paddingTop: 20, paddingLeft: 20, }, }); const store = createStore(reducers); class AutoCompActivity extends Component { componentWillMount() { const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2, }); this.dataSource = ds.cloneWithRows(this.props.services); } render() { return ( <Provider store={store}> <View style={styles.container}> <ListView enableEmptySections={true} dataSource={this.dataSource} renderRow={(rowData) => <ServiceItem services={rowData} /> } /> </View> </Provider> ); } } const mapStateToProps = state => { return { services: state.services }; }; const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity); const App = () => ( <Provider store={store}> <ConnectedAutoCompActivity /> </Provider> ) export default App;

React Native中的不变违规

1 个答案: