Реагировать на родную таблицу стилей высот не работает в FlatList - PullRequest
Новая
       15

Реагировать на родную таблицу стилей высот не работает в FlatList

0 голосов
/ 30 января 2019

Я пытаюсь стилизовать свой renderItem в FlatList, но высота не работает должным образом.Есть ли что-то, что я не так, или это проблема React Native?

Я тоже тестировал ListView, но он все еще не работает должным образом

Это компонент TodoItem 

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container: {
        height: 60,
        backgroundColor: 'white',
        borderRadius: 10,
        shadowColor: '#000',
        shadowOffset: { width: 2, height: 2 },
        shadowOpacity: 0.4,
        shadowRadius: 2,
        elevation: 3,
        justifyContent: 'center',
        paddingHorizontal: 30,
        marginBottom: 12
    },
    text: {
        fontSize: 18,
        fontWeight: '400',
        color: '#080808'
    }
})

export default class TodoItem extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}> {this.props.text} </Text>
            </View>
        )
    }
}

И это то, где я называю это в FlatList 

<FlatList
    data={this.props.items}
    renderItem={(item) => <TodoItem key={item.index} text={item.item} />}
/>

Дело в том, что повышение прав работает должным образом, если я не использую FlatList как этот 

<TodoItem text="Hello world" />

То, что я исключил Что я вижу

1 Ответ

0 голосов
/ 30 января 2019

Большинство подобных проблем вызвано стилем, который применяется к окружающему виду или строке, которую вы пытаетесь визуализировать.

Если вы добавите marginHorizontal: 10 к styles.container для строки, которая, вероятно, должна сделать это за вас.

Вот упрощенный пример, где края строки не обрезаются.Он имеет несколько настроек, чтобы заставить его работать, используя state.items вместо props.items и изменяя имя стиля для TodoItem на itemContainer.Это должно дать вам представление о том, как его реализовать. 

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {

  state = {
    items: [
      'Hello'
    ]
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.items}
          renderItem={(item) => <TodoItem key={item.index} text={item.item} />}
        />
      </View>
    );
  }
}

class TodoItem extends React.Component {
    render() {
        return (
            <View style={styles.itemContainer}>
                <Text style={styles.text}> {this.props.text} </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight + 10,
    backgroundColor: '#ecf0f1',
  },
  itemContainer: {
    marginHorizontal: 10,
    height: 60,
    backgroundColor: 'white',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 0.4,
    shadowRadius: 2,
    elevation: 3,
    justifyContent: 'center',
    paddingHorizontal: 30,
    marginBottom: 12
  },
  text: {
    fontSize: 18,
    fontWeight: '400',
    color: '#080808'
  }
});

Вот закуска, демонстрирующая его работу https://snack.expo.io/@andypandy/flatlist-with-elevation-on-rows

...