Question

当我尝试将我的文本放在组件的中心时，它不起作用，它仍然在组件的左侧。我试图将flex值设置为其父视图但仍然不起作用。我使用expo来运行应用程序。文本单独工作正常，但当我把它放在我的视图中时，它会被冻结。

换句话说，路线：＆＃39;中心＆＃39;没有工作，我认为它与属性无关。

import React from 'react';
import { StyleSheet, Text, Image,View } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; // 6.2.2
import { Font } from 'expo';


export default class App extends React.Component {
 componentDidMount() {
   Font.loadAsync({
     'iransansblack': require('./IRANSansMobile_Black.ttf'),
   });
 }
render() {
   return (
     <View style={{flex:1,flexDirection:'row',justifyContent:'space-
 around'}}>

     <View style={styles.container}>

       <Image
         source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/cat.gif' }}
         style={{height:null,width:null,flex:1}}
    />
  <Text style=

 {{padding:5,alignItems:'center',fontFamily:'iransansblack'}}>samples</Text>  
  </View>
  <View style={styles.container}>

    /*<Image
      source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/cat.gif' }}
      style={{height:null,width:null,flex:1}}/>*/
      <Ionicons name="md-checkmark-circle" size={32} color="blue" />

   <Text style={{padding:5,alignItems:'center'}}>sample </Text>  
     </View>
     </View>
   );
 }
}

 const styles = StyleSheet.create({
 container: {
   borderWidth: 0,
   borderRadius: 5,
   borderColor: '#ddd',
   borderBottomWidth: 0,
   shadowColor: '#000',
   shadowOffset: { width: 0, height: 0 },
   shadowOpacity: 0.1,
   shadowRadius: 5,
   elevation: 0.5,
   marginLeft: 5,
   marginRight: 5,
   marginTop: 80,
   padding:5,
   width:155,
   height:210,
   flex:1



 },
});

Answer 1

您需要使用justifyContent:'center'进行水平对齐，而alignItems:'center则用于垂直对齐。

我希望这个答案有所帮助。

反应原生路线中心不起作用

1 个答案: