Question

我想在电话的四个角上说些什么，但尝试了一切，但没有成功，我是React Native的初学者。

NOW()

这一切都是为了加载自定义字体。

这是所有屏幕的代码

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

非常感谢您的帮助。

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

位置：绝对值较早丢失。

我想在React Native中说几句话

1 个答案: