我是一名有用的助手,可以为您翻译文本。
我正在使用来自React Native Paper库的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,
},
截图:
当前的样子: