Я хочу поместить некоторые слова в углах в React Native

Question

Я хочу поместить несколько слов в 4 угла телефона, но попробовал все, но у меня ничего не получилось, я новичок в React Native.

state = {
fontLoaded: false
}

async componentDidMount () {
await this._loadAssets()
}

async _loadAssets () {
await Font.loadAsync({
  'aga-arabesque': require('./assets/fonts/aga-arabesque.ttf'),
  'Mistral': require('./assets/fonts/Mistral.ttf')

})
this.setState({fontLoaded: true})
}

это все для загрузки пользовательских шрифтов.

и это код всего экрана

let text = null
if (this.state.fontLoaded) {
  text = <View>
    <View style={{flexDirection: 'row',flex: 1}}>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
        a
      </Text>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
        h
      </Text>
    </View>
    <Text style={{fontSize: 170, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
      World
    </Text>
    <View style={{flexDirection: 'row',flex: 1,paddingBottom : "0%"}}>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
        s
      </Text>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "70%"}}>
        g
      </Text>
    </View>
  </View>
}

а вот и стиль контейнера

container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-between'
},

и большое спасибо за вашу помощь.

Answer 1

Вы можете использовать эти атрибуты: справа: 0, сверху: 0, слева: 0, снизу: 0 в вашем стиле.

справа: 0, сверху: 0 напечатает ваш товар в правом верхнем углу. left: 0, top: 0 напечатает ваш элемент в левом верхнем углу. и так далее ...

Пример:

<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray', left: 0, Top: 0}}>
        a
</Text>

просто чтобы помочь вам, я создал рабочий пример

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
    <View style={{flexDirection: 'row',flex: 1}}>
      <Text style={{ position: 'absolute', fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
        a
      </Text>
      <Text style={{ position: 'absolute', right: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
        h
      </Text>
    </View>
    <Text style={{ fontSize: 70, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
      World
    </Text>
    <View style={{flexDirection: 'row',flex: 1}}>
      <Text style={{ position: 'absolute', bottom: 0, left: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
        s
      </Text>
      <Text style={{ position: 'absolute', fontSize: 60, bottom: 0, right: 0, fontFamily: 'aga-arabesque', color: 'gray'}}>
        g
      </Text>
    </View>
  </View>
    );
  }
}

позиция: ранее абсолютный отсутствовал.