React Native: 텍스트를 중앙에 배치하는 방법
텍스트를 ReactNative에서 가로와 세로로 중앙에 배치하려면 어떻게 해야 합니까?
rnplay.org에 justiceContent="center" 및 alignItems="center"가 작동하지 않는 예제 응용 프로그램이 있습니다. https://rnplay.org/apps/AoxNKQ
텍스트의 중심이 맞춰져야 합니다.그리고 텍스트(노란색)와 상위 컨테이너 사이에 여백이 있는 이유는 무엇입니까?
코드:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.topBox}>
<Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>
</View>
<View style={styles.otherContainer}>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
},
topBox: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'lightgray',
justifyContent: 'center',
alignItems: 'center',
},
headline: {
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
height: 80,
backgroundColor: 'yellow',
justifyContent: 'center',
alignItems: 'center',
},
otherContainer: {
flex: 4,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
부터headline스타일 삭제height,justifyContent그리고.alignItems텍스트가 수직으로 가운데에 놓입니다.더하다textAlign: 'center'가로로 가운데를 맞춥니다.
headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
이미 답변했습니다만, 사용 사례에 따라 토픽과 방법을 조금 더 추가하고 싶습니다.
추가할 수 있습니다.adjustsFontSizeToFit={true}(현재 문서화되어 있지 않음)에 대해서Text상위 노드 내부의 크기를 자동 조정하는 구성 요소입니다.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
텍스트 구성 요소에 다음을 추가할 수도 있습니다.
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
또는 텍스트 구성 요소의 부모에 다음을 추가할 수 있습니다.
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text>Hiiiz</Text>
</View>
또는 둘 다
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
또는 셋 다
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text adjustsFontSizeToFit={true}
numberOfLines={1}
style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
네가 뭘 하느냐에 달렸어또한 이 주제에 대한 제 블로그 투고를 확인하실 수 있습니다.
textAlignVertical: "center"
진짜 마법이에요.
이미지 구성요소에서 다음 스타일을 설정합니다.
{
textAlignVertical: "center",
textAlign: "center"
}
수평 및 수직 중심 정렬
<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>
수평 및 수직 정렬을 동시에 수행하는 예제입니다.
<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
<Text style={{width: '100%',textAlign: 'center'}} />
</View>
다음 속성을 사용할 수 있습니다.{{alignItems: 'center'}}아이템을 사용하고 있기 때문에<Text>"string"이 아닙니다.
<View style={{alignItems: 'center'}}>
<Text> Hello i'm centered text</Text>
</View>
사용할 수 있습니다.alignSelfText 구성 요소의 속성
{ alignSelf : "center" }
<View style={{ backgroundColor: 'blue', justifyContent: 'center' }}>
<Text style={{ fontSize: 25, textAlign: 'center' }}>A</Text>
</View>
어디에 있든Text페이지 내의 컴포넌트는, 다음의 스타일을 설정하기만 하면 됩니다.Text요소.
<Text style={{ textAlign: 'center' }}> Text here </Text>
다른 스타일링 속성을 추가할 필요가 없습니다.인터페이스 중앙에 텍스트가 표시됩니다.
단순 추가
textAlign: "center"
당신 스타일대로시트, 그거야.이게 도움이 됐으면 좋겠다.
편집: "중앙"
상위 보기에서 설정
justifyContent:center
및 하위 보기에서 alignSelf:center
네, 기본적인 문제이므로 걱정하지 마시고 <View> 컴포넌트를 기입하여 <Text> 컴포넌트에 감아주세요.
<View style={{alignItems: 'center'}}>
<Text> Write your Text Here</Text>
</View>
alignitems: 중심은 항목을 가로축 중앙에 배치하기 위한 받침대입니다.
justice content:'center'는 항목을 주축 중앙에 배치하기 위한 도구입니다.
다른 답변에 기재되어 있는 사용 사례 외에 다음과 같은 것이 있습니다.
BottomTabNavigator의 특정 사용 사례에서 텍스트를 중앙에 배치하려면 (TabNavigator에 아이콘이 없는 경우에도) showIcon을 false로 설정해야 합니다.그렇지 않으면 텍스트가 탭 아래쪽으로 푸시됩니다.
예를 들어 다음과 같습니다.
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen
}, {
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
showIcon: false, //do this
labelStyle: {
fontSize: 20,
textAlign: 'center',
},
tabStyle: {
backgroundColor: 'grey',
marginTop: 0,
textAlign: 'center',
justifyContent: 'center',
textAlignVertical: "center"
}
}
상위 보기 flex:1에 처음 추가, justiceContent: 'center', alignItems: 'center'
텍스트에 텍스트를 추가합니다.Align: '중앙'
사용했다
텍스트 정렬: 중심
경치를 보고
const styles = StyleSheet.create({
navigationView: {
height: 44,
width: '100%',
backgroundColor:'darkgray',
justifyContent: 'center',
alignItems: 'center'
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
})
render() {
return (
<View style = { styles.navigationView }>
<Text style = { styles.titleText } > Title name here </Text>
</View>
)
}
여기에는 두 가지 방법을 사용할 수 있습니다.
하려면 이 합니다.
(textAlign:"center")이제 텍스트를 수직으로 정렬하려면 먼저 플렉스 방향을 확인합니다.속성인 경우(flexDirection)를 합니다.justifyContent:"center"속성flexDirection) row apply 속성( )alignItems : "center"중심을 만들려면 동일한합니다.
textAlign:"center"하려면 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,<Text> </Text>한 특성성질 적용)textAlignVertical: "center"
아마 효과가 있을 거야...
대부분의 경우 React Native는 표준 CSS dasherized-lisp-style(kebab-case)이 아닌 camelCase(camelCase)라는 이름의 CSS 스타일 속성을 지원합니다.
이는 React/JSX와 동일합니다.
속성 CSS " "text-align이 있습니다.textAlign
따라서 보통 CSS 속성을 camel Case로 변환하여 사용해 보는 것이 좋습니다.
제목: { textAlign: '중앙', 글꼴 무게: '굵은 글씨'}
<View style={{alignSelf:'center'}}>
<Text>React Native</Text>
</View>
언급URL : https://stackoverflow.com/questions/37571418/reactnative-how-to-center-text
'programing' 카테고리의 다른 글
| 브라우저에서 testacular를 사용한 디버깅(현재의 카르마) (0) | 2023.03.07 |
|---|---|
| WordPress 웹 사이트를 프로그레시브 웹 앱으로 변환 (0) | 2023.03.07 |
| 동기 XMLHttpRequest를 사용해야 하는 이유가 있습니까? (0) | 2023.03.07 |
| SQL JPA - 여러 열을 기본 키로 지정 (0) | 2023.03.07 |
| WordPress 사용자가 확장자 없이 사진 업로드 (0) | 2023.03.07 |