如何停止 React-Native FlatList 干扰其他组件

Question

我有一个简单的 React-Native 应用程序，它使用 FlatList 和 Redux。问题是，当列表变长并到达输入元素所在的屏幕底部时，它会破坏这些输入元素，即使它们位于另一个组件和容器中。我已经为此尝试了一百万次修复，但似乎没有任何效果。

我怎样才能做到让 FlatList 只占据屏幕的 2/3？

这是问题的截图（当项目到达输入框时，会导致输入框缩小并被打乱）：

这是包含我所有组件的应用程序文件：

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'
    }
  };

Answer 1

首先，从您的ItemsList 中删除<List>，因为您已经使用了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);