Реагировать на границу не работает

Question

Я хочу поставить рамку вокруг моего текста.

    <View style={{ borderRadius: 1, borderWidth: 1, borderColor:'#FF0000',}}>
            <Text style={{
               fontSize: 0.8,
               fontWeight: '400',
               layoutOrigin: [0.5, 0.5],
               paddingLeft: 0.2,
               paddingRight: 0.2,
               textAlign: 'center',
               textAlignVertical: 'center',
               transform: [{translate: [0, 0, -3]}],
             }}>
              hello
             </Text>
          </View>

Если я оставлю borderWidth как 1, я вижу привет, но я не вижу границы. Если я изменю borderWidth на что-то вроде 10, я ничего не вижу. Как добавить рамку в текст приветствия?

Answer 1

Граница действительно работает, но ваш вид по умолчанию расположен в центре сцены, где находится вид с камеры. Что вы действительно хотите сделать, так это установить layoutOrigin в вашем корневом представлении, а также перевод, чтобы все компоненты правильно отображались там.

Это должно сделать это:

<View style={{ 
    borderRadius: 1, 
    borderWidth: 1, 
    borderColor:'#FF0000',
    transform: [{translate: [0, 0, -3]}],
    layoutOrigin: [0.5, 0.5],
}}>
    <Text style={{
        fontSize: 0.8,
        fontWeight: '400',
        paddingLeft: 0.2,
        paddingRight: 0.2,
        textAlign: 'center',
        textAlignVertical: 'center',
    }}>hello</Text>
</View>

Это должно правильно отображать рамку вокруг вашего текста, хотя вы заметите, что ширина рамки слишком велика, поскольку единицы измерения - это не пиксели, а метры в трехмерном мире.