Блог

Главная - Вопросы по программированию - выравнивание и центрирование текста в среде react native

выравнивание и центрирование текста в среде react native

#react-native #text-align

#react-native #выравнивание текста

Вопрос:

В react native у нас есть свойство TextAlign с параметрами либо «выравнивание» (и последняя строка будет следовать направлению текста по умолчанию), либо «по центру» (где текст центрируется, но строки не выровнены) Я хочу знать, есть ли способ объединить оба (т. Е. центрировать текст, а также равномерно начинать и заканчивать строки)?

Редактировать: вот код, импортирующий React из «react»; импортируйте {таблицу стилей, текст, вид, вид прокрутки, строку состояния} из «react-native»;

 export default function App() {
 return (
  <View style={styles.background}>
  <View style={styles.pageContainer}>
    <ScrollView
      contentContainerStyle={{
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style={styles.arabicText}>
        هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا
        ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1)
        </Text>
       </ScrollView>
     </View>
    </View>
  );
 }

  const styles = StyleSheet.create({
  background: {
  flex: 1,
  justifyContent: "space-evenly",
  alignItems: "center",
  backgroundColor: "white",
  },
  pageContainer: {
  alignItems: "center",
  width: "100%",
  flex: 1,
  backgroundColor: "#FFFAF1",
},
 arabicText: {
 direction: "rtl",
 marginRight: 8,
 marginLeft: 8,
 marginTop: 5,
 marginBottom: 5,
 flexDirection: "row",
 textAlign: "justify",
 fontSize: 26,
  padding: 2,
  },
});

Ответ №1:

Да, вы можете поместить свой Text тег внутри View тега и присвоить alignItems:'center' ему свойство View

  <View style={{ alignItems: 'center' }}>
    <Text style={{ textAlign: 'justify' }}>
         Enter your text here
    </Text>
 </View>

Комментарии:

1. спасибо за ответ, но он не работает (я хочу, чтобы сам текст начинался справа от строки, поэтому в тексте должно быть что-то вроде режима «выравнивание и вправо», но я не знаю, возможно ли это в react native) Я добавил код для дополнительных разъяснений