React Native에서 아이콘을 왼쪽에, 텍스트를 가운데에 정렬
스톤 프레스턴
flexbox를 사용하여 내 아이콘을 버튼보기의 왼쪽에 정렬하고 텍스트를 중앙에 정렬하려고합니다. 현재 둘 다 중앙에 정렬되어 있지만 텍스트를 뷰의 중앙에 유지하면서 버튼의 맨 왼쪽 가장자리에 내 아이콘을 표시하는 방법을 모르겠습니다.
지금 내 버튼은 다음과 같습니다.
내가 사용하고 https://github.com/APSL/react-native-button을 버튼과 https://github.com/oblador/react-native-vector-icons 아이콘
다음은 내 코드 중 일부입니다.
<Button style={signupStyles.facebookButton}>
<View style={signupStyles.nestedButtonView}>
<Icon
name="facebook"
size={30}
color={'white'}
/>
<Text style={signupStyles.buttonText}>Continue with Facebook</Text>
</View>
</Button>
var signupStyles = StyleSheet.create({
buttonText: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
facebookButton: {
backgroundColor: styleConstants.facebookColor,
borderColor: styleConstants.facebookColor,
borderWidth: 2,
borderRadius: 22,
},
nestedButtonView: {
flexDirection: 'row',
alignItems: 'center',
},
});
Ason
당신은에 아이콘을 설정 할 수있는 width텍스트를 제공 padding-right, text-align및flex:1
<Button style={signupStyles.facebookButton}>
<View style={signupStyles.nestedButtonView}>
<Icon
name="facebook"
size={30}
color={'white'}
/>
<Text style={signupStyles.buttonText}>Continue with Facebook</Text>
</View>
</Button>
var signupStyles = StyleSheet.create({
buttonText: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
facebookButton: {
backgroundColor: styleConstants.facebookColor,
borderColor: styleConstants.facebookColor,
borderWidth: 2,
borderRadius: 22,
},
nestedButtonView: {
flexDirection: 'row',
alignItems: 'center',
},
iconLeft: {
width: '40px',
},
buttonText: {
flex: 1,
paddingRight: '40px',
textAlign: 'center',
},
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Flex를 사용하여 아이콘을 왼쪽에 정렬하고 텍스트를 가운데에 정렬하는 방법은 무엇입니까?
- 2
아이콘을 왼쪽에, 텍스트를 오른쪽에 정렬하는 방법
- 3
영어가 아닌 텍스트를 왼쪽에 정렬
- 4
텍스트를 중앙에 배치하고 아이콘을 왼쪽으로 정렬
- 5
텍스트를 왼쪽으로 정렬하면서 여러 줄 블록을 가운데에 배치
- 6
아이콘 (위쪽)과 텍스트 (아래쪽)가 모두 왼쪽에 정렬 된 JButton
- 7
왼쪽 정렬 텍스트 오버레이로 이미지를 가운데에 맞추는 방법
- 8
CSS에서 텍스트 왼쪽 정렬 및 이미지 오른쪽 정렬
- 9
부트 스트랩은 아이콘을 왼쪽에 정렬하고 텍스트를 상단 막대 중앙에 정렬합니다.
- 10
이미지 왼쪽 아래에 텍스트 정렬
- 11
김프에서 가운데, 왼쪽 및 오른쪽 정렬 텍스트
- 12
ASP.NET 텍스트 상자는 오른쪽에서 왼쪽으로 웹 페이지에서 텍스트를 왼쪽에서 오른쪽으로 정렬
- 13
텍스트를 오른쪽에 맞추고 아이콘 정렬
- 14
양쪽에 패딩을 사용하여 텍스트를 가운데에 정렬
- 15
내 버튼은 텍스트 정렬을 넣어도 가운데에 있습니다. 왼쪽;
- 16
선형 레이아웃의 왼쪽과 오른쪽에 텍스트보기를 정렬하는 방법
- 17
플렉스 테이블의 아이콘 아래에 텍스트를 가운데 정렬 할 수 없습니다.
- 18
HBox에서 어린이를 왼쪽, 가운데 및 오른쪽으로 정렬하는 방법
- 19
휴대 기기에서 사이트가 왼쪽에 정렬 됨
- 20
Nimbus Look and Feel에서 JTabbedPane의 왼쪽에 아이콘 정렬
- 21
텍스트는 왼쪽에서 오른쪽으로, 텍스트는 오른쪽에서 왼쪽으로 정렬
- 22
아이콘 옆에 텍스트 정렬
- 23
텍스트를 왼쪽에 정렬하는 방법?
- 24
React Native에서 텍스트 정렬이 자동 정렬되지 않음
- 25
h1의 가운데 텍스트 왼쪽에 배경 이미지를 정렬하려면 어떻게해야합니까?
- 26
내 텍스트가 왼쪽에 정렬되는 이유는 무엇입니까?
- 27
이미지의 상단, 오른쪽, 하단 및 왼쪽에 텍스트를 정렬 하시겠습니까?
- 28
CSS 텍스트는 왼쪽과 오른쪽에 동일한 패딩을 유지하면서 오른쪽 정렬
- 29
Android 오른쪽 또는 왼쪽에 텍스트 정렬
몇 마디 만하겠습니다