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

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" }

Text페이지에 컴포넌트가있는 경우 컴포넌트의 스타일을 설정해야합니다 Text.

 <Text style={{ textAlign: 'center' }}> Text here </Text>

다른 스타일링 속성을 추가 할 필요가 없습니다. UI의 중심에 텍스트를 설정하는 놀라운 마법입니다.

간단한 추가

textAlign: "center"

당신의 styleSheet에서, 그게 다야. 이것이 도움이되기를 바랍니다.

편집 : "중앙"

다음과 같은 속성을 사용할 수 있습니다. {{alignItems: 'center'}}

<View style={{alignItems: 'center'}}>
 <Text>Hello im centered text{this.props.name}!</Text>
</View>

익숙한

텍스트 정렬 : 중앙

보기에서

부모보기에서 설정

justifyContent:center

그리고 자식보기에서 alignSelf : 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"
    }
  }

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>
    )

}

먼저 부모보기에 추가하십시오 flex : 1, justifyContent : 'center', alignItems : 'center'

그런 다음 텍스트에 textAlign : 'center'를 추가하십시오.