Question

我搜索了如何使用React Native设置页脚。我找到了解决方案

https://stackoverflow.com/a/31249011/8226957

我关注并将style={{flex: 1}}放到root视图中，但它不起作用。

<View style={{flex: 1}}>
    <ScrollView>
        <FlatList
            data={this.state.datas}
            renderItem={({item}) =>
                <TouchableOpacity onPress={() => {this._deleteKeyFromAsyncStorage(item.key)}}>
                    <Text style={styles.item}>
                        {item.value}
                    </Text>
                </TouchableOpacity>
            }
        />
    </ScrollView>
    <View>
        <TextInput
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(text) => this.setState({text})}
            value={this.state.text}
        />
        <TouchableOpacity onPress={this._onAddButton}>
            <View style={{
                height: 50,
                backgroundColor: 'steelblue',
                alignItems: 'center',
                justifyContent: 'center',
            }}>
                <Text style={{textAlign: 'auto'}}>ADD</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

当我遵循时，我看到消失的List。

Answer 1

尝试添加justifyContent : 'space-between'并添加应该解决问题的flexDirection: 'column'

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>

Answer 2

尝试将<ScrollView>包裹在<View style={{ flex: 1 }}>

中

如果这不起作用，请尝试设置一个固定的高度：<View style={{ height: 90 }}>

React Native flexBox页脚不起作用

2 个答案: