ReactNative: làm thế nào để trung tâm văn bản?

Làm cách nào để căn giữa Văn bản trong ReactNative cả theo chiều ngang và dọc?

Tôi có một ứng dụng ví dụ trong rnplay.org trong đó justifyContent = "centre" và alignItems = "centre" không hoạt động: https://rnplay.org/apps/AoxNKQ

Các văn bản nên được tập trung. Và tại sao có một lề ở trên cùng giữa văn bản (màu vàng) và thùng chứa cha?

Mã số:

'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;

Từ headline'loại bỏ phong cách height, justifyContentvà alignItems. Nó sẽ tập trung văn bản theo chiều dọc. Thêm textAlign: 'center'và nó sẽ tập trung văn bản theo chiều ngang.

  headline: {
    textAlign: 'center', // <-- the magic
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  }

Đã trả lời nhưng tôi muốn thêm một chút về chủ đề và các cách khác nhau để làm điều đó tùy thuộc vào trường hợp sử dụng của bạn.

Bạn có thể thêm adjustsFontSizeToFit={true}(hiện không có giấy tờ) vào TextThành phần để tự động điều chỉnh kích thước bên trong nút cha.

  <Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>

Bạn cũng có thể thêm phần sau vào Thành phần văn bản của mình:

<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>

Hoặc bạn có thể thêm phần sau vào cha mẹ của thành phần Văn bản:

<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text>Hiiiz</Text>
</View>

hoặc cả hai

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

hoặc cả ba

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text adjustsFontSizeToFit={true} 
           numberOfLines={1} 
           style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

Tất cả phụ thuộc vào những gì bạn đang làm. Bạn cũng có thể kiểm tra bài viết đầy đủ của tôi về chủ đề này

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

Đặt các kiểu này thành thành phần hình ảnh: {textAlignV vertical: "centre", textAlign: "centre"}

textAlignVertical: "center"

là ma thuật thực sự.

đây là một ví dụ cho căn chỉnh ngang và dọc

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

Căn chỉnh trung tâm ngang và dọc

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

Bạn có thể sử dụng thuộc alignSelftính trên thành phần Văn bản

{ alignSelf : "center" }

Bất cứ nơi nào bạn có Textthành phần trong trang của mình, bạn chỉ cần đặt kiểu của Textthành phần đó.

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

bạn không cần thêm bất kỳ thuộc tính tạo kiểu nào khác, đây là phép thuật ngoạn mục, nó sẽ đặt bạn văn bản ở giữa giao diện người dùng của bạn.

Thêm đơn giản

textAlign: "center"

trong styleSheet của bạn, đó là nó. Hy vọng điều này sẽ giúp.

chỉnh sửa: "trung tâm"

Các tài sản sau đây có thể được sử dụng: {{alignItems: 'center'}}

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

đã sử dụng

textalign: trung tâm

ở góc nhìn

Ngoài các trường hợp sử dụng được đề cập trong các câu trả lời khác:

Để căn giữa văn bản trong trường hợp sử dụng cụ thể của bottomTabNavigator , hãy nhớ đặt showIcon thành false (ngay cả khi bạn không có biểu tượng trong TabNavigator). Nếu không, văn bản sẽ được đẩy xuống dưới cùng của Tab.

Ví dụ:

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

}

đầu tiên thêm vào khung nhìn cha mẹ flex: 1, justifyContent: 'centre', alignItems: 'centre'

sau đó trong văn bản thêm textAlign: 'centre'