Как остановить React-Native FlatList, взаимодействующий с другими компонентами - PullRequest
Новая
       44

Как остановить React-Native FlatList, взаимодействующий с другими компонентами

0 голосов
/ 10 июня 2018

У меня есть простое приложение React-Native, которое использует FlatList с Redux.Проблема состоит в том, что когда список становится длинным и достигает нижней части экрана, где существуют элементы ввода, он разрушает эти элементы ввода, даже если они находятся в другом компоненте и контейнере.Я пробовал миллион исправлений для этого, но, похоже, ничего не работает.

Как мне сделать что-то вроде того, чтобы FlatList занимал 2/3 экрана?

Это скриншот проблемы (когда элементы достигают полей ввода, это приводит к полям вводасжатие и разрыв):

enter image description here

Это файл приложения, который содержит все мои компоненты: 

export default class App extends Component {
  render() {
    return (
  <Provider store={createStore(reducers)}>
    <View style={{ flex: 1 }}>
        <ItemsList />
        <AddItem />
    </View>
  </Provider>
    );
  }
}

Этокомпонент, который использует FlatList: 

class ItemsList extends Component {

    render() {
        return (
            <List>
                <FlatList
                    data={this.props.items} 
                    renderItem={({ item }) => (
                        <ListItem 
                            name={item.item} id={item.id}
                        />
                    )}
                    keyExtractor={item => item.id.toString() }
                />
            </List>
          );

        }
    }

  const mapStateToProps = state => {
    return { items:  state.items };
  };


export default connect(mapStateToProps)(ItemsList);

Код для addItem: 

class AddItem extends Component {

    state = {
        item: "",
        quantity: ""
    }

    onButtonPress() {
        this.props.addItem(this.state)
        this.setState({
            item: "",
            quantity: 0
        })
    }

    render() {

    const { input, container, add, addText } = styles;
        return (
            <View style={container}>
                <TextInput placeholder="add item" 
                    placeholderTextColor="rgba(0, 0, 0, 0.5)" 
                    style={input} 
                    onChangeText={item => this.setState({ item })}
                    value={this.state.item}
                />
                <TextInput placeholder="add item" 
                    placeholderTextColor="rgba(0, 0, 0, 0.5)" 
                    style={input} 
                    onChangeText={quantity => this.setState({ quantity })}
                />
                <TouchableOpacity style={add} onPress={this.onButtonPress.bind(this)}>
                    <Text style={addText}>Add Item</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default connect(null, {addItem})(AddItem);

const styles = {
    input: {
        backgroundColor: 'rgb(208, 240, 238)',
        paddingVertical: 15,
        paddingHorizontal: 10,
        marginBottom: 5
        },
    add: {
        backgroundColor: 'black',
        paddingVertical: 15,
    },
    addText: {
        textAlign: 'center',
        color: 'white'
    },
    container: {
        padding: 20,
        flex: 1,
        justifyContent: 'flex-end'
    }
  };

1 Ответ

0 голосов
/ 10 июня 2018

Прежде всего, удалите <List> из вашего ItemsList, так как вы уже используете FlatList.Затем, чтобы ваш FlatList занял 2/3 высоты экрана, сделайте следующее: 

class ItemsList extends Component {

    render() {
        return (
            <View style={{ flex: 2 }}>
                <FlatList
                    data={this.props.items} 
                    renderItem={({ item }) => (
                        <ListItem 
                            name={item.item} id={item.id}
                        />
                    )}
                    keyExtractor={item => item.id.toString() }
                />
            </View>
          );

        }
    }

  const mapStateToProps = state => {
    return { items:  state.items };
  };


export default connect(mapStateToProps)(ItemsList);
...