如何在本机反应中对齐屏幕底部的按钮？答案

【问题标题】：How to align button at bottom of screen in react native?如何在本机反应中对齐屏幕底部的按钮？
【发布时间】：2019-06-18 02:40:32
【问题描述】：

我正在使用来自 react native 纸库的 FAB (https://callstack.github.io/react-native-paper/fab.html#icon)。我想在底部对齐按钮，但它与 textInput 字段重叠，如何将它放在该 textInput 下方？请看下面的截图。

代码：

//Inside return
    <ScrollView>

                    <Text style={styles.title}>Add a Lead</Text>

                    <View style={styles.inputContainer}>
                        <Image source={require('../../assets/images/name.png')} style={{
                            marginTop: 15, width: 32, height: 32, resizeMode: 'contain'}}/>
                        <TextInput
                            placeholder='Name'
                            value={this.state.name}
                            style={styles.input}
                            onChangeText={ name => this.setState({name})}
                            error={this.state.nameError}
                        />
                    </View>
                    <HelperText type="error" visible={this.state.emailError}>
                        {this.state.emailError}
                    </HelperText>

            Similarly other items for phone email etc....

            <View style={{marginTop: 20, flex: 1, flexDirection: 'row'}}>
                        <Image source={require('../../assets/images/comment.png')} style={{
                            marginTop: 20, width: 32, height: 32, resizeMode: 'contain'}}/>
                        <Text style={{marginTop: 25, marginLeft: 15}}>Comment</Text>
                    </View> 

                    <View>
                        <TextInput
                            style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1}}
                            onChangeText={(comment) => this.setState({comment})}
                            value={this.state.comment}
                            error={this.state.commentError}
                            multiline = {true}
                            numberOfLines = {4}
                        />
                    </View>
            <FAB
                    style={styles.fab}
                    small
                    icon="arrow_forward"
                    onPress={this.handleCreateNewLead}
                />
    </ScrollView>

css:

fab: {
        position: 'absolute',
        margin: 16,
        right: 0,
        bottom: -20,
    },

截图：

目前的样子：

【问题讨论】：

标签： html css reactjs react-native

【解决方案1】：

为 textarea（您放置 ? 图标）添加了 position:relative。

<TextInput style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1, position: relative}}

并更改 fab 组件的样式

fab: {
        position: 'absolute',
        margin: 16,
        right: 10,
        bottom: 10,
    }

希望它会起作用。

【讨论】：

【解决方案2】：

TextField 和 FAB 组件都需要用 View 包装；

<View style={styles.container}>
    <TextInput
        style={styles.textField}
        onChangeText={(comment) => this.setState({comment})}
        value={this.state.comment}
        error={this.state.commentError}
        multiline={true}
        numberOfLines={4}
    />
    <FAB
        style={styles.fab}
        small
        icon="arrow_forward"
        onPress={this.handleCreateNewLead}
    />
</View>

并用这些改变你的风格；

const styles={
    container:{
        flexDirection:"row",
        alignItems:"center",
        marginTop: 15
    },
    textField:{
        flex:1,
        height: 65,
        borderColor: 'gray',
        borderWidth: 1
    },
    fab: {
        position:"absolute",
        right:0,
    },
};

【讨论】：