[reactjs] ReactNative : 텍스트를 가운데에 맞추는 방법?

Program / 글쓴이

ReactNative에서 텍스트를 가로 및 세로로 가운데 맞추는 방법은 무엇입니까?

rnplay.org에 예제 응용 프로그램이 있는데 justifyContent = “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>

또는 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>

그것은 모두 당신이하는 일에 달려 있습니다. 주제에 대한 전체 블로그 게시물을 확인할 수도 있습니다.

https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

답변

이러한 스타일을 이미지 구성 요소로 설정하십시오. {textAlignVertical : “center”, textAlign : “center”}

답변

textAlignVertical: "center"

진짜 마법입니다.

답변

이것은 수평 및 수직 정렬의 동시 예입니다

<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
     <Text style={{width: '100%',textAlign: 'center'}} />
</View>

답변

수평 및 수직 중심 정렬

<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
     <Text> Example Test </Text>
</View>

답변

alignSelf텍스트 컴포넌트에서 속성을 사용할 수 있습니다

{ alignSelf : "center" }