Question

我得到了一个我应该用反应本机实现的模型。该模型是：

我的实施是：

如何调整文本以使其更类似于模型？

function: if(int) 
 return new object(){
   int nr=..
}

Answer 1

我建议你应该做的第一件事就是将模拟分成虚拟部分，然后按照最小的部分进行操作。

<强>

分隔这些部分后，逐个创建视图。通过这种方式，您可以设计具有相对位置的应用，这将有助于您调整内容，并且在不同的屏幕尺寸下看起来也非常相似。

在此示例之后，我创建了一个您可以遵循的简单代码，它可以帮助您通过小的更改创建所需的外观。（Here its snack）

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.section1}>
          <Text style={[styles.text, {paddingBottom: 20}]}>{'Welcome'}</Text>
        </View>
        <View style={styles.section2}>
          <Text style={[styles.text, {paddingTop: 20}]}>{'Your verification was successful'}</Text>
        </View>
        <View style={styles.section3}>
          <Text style={styles.text}>{'Sign up as:'}</Text>
        </View>
        <View style={styles.section4}>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Image source={require('./assets/stck2.png')} style={styles.image} />
              <Text style={styles.buttonText}>{'Translator'}</Text>
            </View>
            <View style={styles.button}>
              <Image source={require('./assets/stck1.png')} style={styles.image} />
              <Text style={styles.buttonText}>{'Recruiter'}</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#fff',
  },
  section1: {
    flex: 0.17,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  section2: {
    flex: 0.30,
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  section3: {
    flex: 0.10,
    justifyContent: 'center',
    alignItems: 'center'
  },
  section4: {
    flex: 0.43
  },
  text: {
    fontSize: 24,
    color: '#53a6db',
    textAlign: 'center',
    paddingTop: 40,
    paddingBottom: 40,
    paddingLeft: 40,
    paddingRight: 40
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row'
  },
  button: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonText: {
    fontSize: 24,
    color: '#53a6db',
    textAlign: 'center',
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 5,
    paddingRight: 5
  },
  image: {
    width: 100,
    height: 100
  }
});

这是最后的样子

调整文字位置

1 个答案: