JSON API的flatlist呈现数据，每行3个项目

Question

大家好，我正在从json api获取数据，并且我正在使用Flatlist来呈现项目。我正在使用 angular.module('myAngularJsModule').config(["$locationProvider", function ($locationProvider) { $locationProvider.html5Mode(false); }]) .config( ['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider) { /** * Default route. */ $urlRouterProvider.otherwise('/login'); $stateProvider .state('login', { url: '/login', params: {message: null}, component: 'loginComponent', template: '<login-component></login-component>' }); 属性来显示每行3个项目 但假设我有7或8个项目 我在渲染时遇到麻烦。我要显示的布局是这样的

 template: '<h1>Hello World!<h1>'

但是我得到的是： layout

这是我的代码：

 Error: StaticInjectorError(AppModule)[UpgradeModule -> Injector]: 
 StaticInjectorError(Platform: core)[UpgradeModule -> Injector]: 
NullInjectorError: No provider for Injector!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8376)
at _createClass (core.js:8423)
at _createProviderInstance (core.js:8393)

Answer 1

由于您使用的是flex: 1和alignItems: center，因此您的布局将像这样

因此，其中的items将根据项目 layout 垂直对齐垂直和水平。

相反，您需要检查设备的width并根据其添加布局。

以您的风格

Category: {
  flex:1,
  maxWidth: Dimensions.get('window').width / 3 - 10, // Width / 3 - (marginLeft and marginRight for the components)
  justifyContent: 'center',
  alignItems:'center',    
  margin:5
},

添加此样式后，布局将如下所示

Answer 2

如果要这样显示

X X X
X X X
X X

不是

X X X
X X X
 X X

只需更改样式：

   const styles = StyleSheet.create({
   Category: {
        flex:1,
        justifyContent: 'flex-start',
        alignItems:'center',    
        margin:5
    },
    CategoryImg: {
        resizeMode: 'contain',
        width: 50,
        height: 50
    }
})

Answer 3

Flatlist延迟加载项目-这意味着它们在滚动时呈现。由于性能，这是平面列表的行为。如果您有兴趣一起渲染所有内容，则应改用ScrollView