带有样式边距的本机基本按钮不包含其中的文本
Native Base button with margin in style does not the text inside it
我使用本机基础编写了一个基于 React Native 的应用程序。当我尝试在按钮中放置边距时,它不会显示按钮内的文本。我该如何解决?
当我删除边距时,它工作正常。但是当我把保证金退回时它不起作用。我搜索了很多来源,但没有人显示任何解决方案。
这是代码:
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Image } from 'react-native';
import FloatLabelInput from './src/components/FloatLabelInput';
import {Button, Text} from 'native-base'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
style={styles.background_Image}
source={require('./media/free-blurry-background-1636594.jpg')}
/>
<Image source={require('./media/Save-the-Children-Logo.png')}
style={{height: '10%', width: '100%'}}/>
<FloatLabelInput name='Username' security='false'/>
<FloatLabelInput name='Password' security='true'/>
<Button block rounded danger
onPress={() => console.log('my first app')}
style = {styles.button_style}
// accessibilityLabel="Learn more about this purple button"
>
<Text >LOGIN</Text>
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#C0C0C0',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
background_Image: {
backgroundColor: '#ccc',
flex: 1,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
},
button_style: {
margin: '5%'
}
});
通过参考这个问题 https://github.com/facebook/react-native/issues/19164,我相信这是一个与百分比相关的错误。对于替代解决方案,请尝试使用 px
button_style: {
margin: 5
}
我使用本机基础编写了一个基于 React Native 的应用程序。当我尝试在按钮中放置边距时,它不会显示按钮内的文本。我该如何解决? 当我删除边距时,它工作正常。但是当我把保证金退回时它不起作用。我搜索了很多来源,但没有人显示任何解决方案。 这是代码:
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Image } from 'react-native';
import FloatLabelInput from './src/components/FloatLabelInput';
import {Button, Text} from 'native-base'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
style={styles.background_Image}
source={require('./media/free-blurry-background-1636594.jpg')}
/>
<Image source={require('./media/Save-the-Children-Logo.png')}
style={{height: '10%', width: '100%'}}/>
<FloatLabelInput name='Username' security='false'/>
<FloatLabelInput name='Password' security='true'/>
<Button block rounded danger
onPress={() => console.log('my first app')}
style = {styles.button_style}
// accessibilityLabel="Learn more about this purple button"
>
<Text >LOGIN</Text>
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#C0C0C0',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
background_Image: {
backgroundColor: '#ccc',
flex: 1,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
},
button_style: {
margin: '5%'
}
});
通过参考这个问题 https://github.com/facebook/react-native/issues/19164,我相信这是一个与百分比相关的错误。对于替代解决方案,请尝试使用 px
button_style: {
margin: 5
}