html - 如何在本机反应中对齐屏幕底部的按钮?
问题描述
我正在使用来自反应原生纸库的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,
},
截屏:
它目前的样子:
解决方案
对于 textarea(您放置 ? 图标)添加位置:相对。
<TextInput style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1, position: relative}}
并更改 fab 组件的以下样式
fab: {
position: 'absolute',
margin: 16,
right: 10,
bottom: 10,
}
可能会奏效。
推荐阅读
- c++ - c ++:“无法在动态链接库中找到过程入口点_ZNSt7__cxx1112basic_stringlcSt11char_traitslcESalcEEC1EPKcRKS3_”
- sql - 当用户在 txtbox 中输入他们的用户名时,软件崩溃
- python - python3在类型注释上引发属性错误
- python - 如何获取与函数签名对应的 TypedDict?
- javascript - ASP.NET MVC 应用程序无法从 cshtml 文件调用 JS 或 CSS 文件
- javascript - 将地图项传递给函数始终只获取第一项
- javascript - 根据对象的数量属性相乘
- asp.net-mvc - C# mvc DropDownList 验证
- spring - 在spring boot + rest docs中,如何设置'.html'后缀
- amazon-web-services - 是否可以将负载均衡器添加到没有负载均衡器的现有 AWS Elastic Beanstalk 应用程序?