React native 调整文本位置

我有一个我应该用react native实现的模型。模型是：

我的实施是：

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

import React from 'react';
import {Button, Image, Picker, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json

class HomeScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            titleText: 'Welcome Ivanka!',
            bodyText: 'Your verification was successful.',
            bodyText2: 'Sign up as:'
        };
    }

    render() {
        return (
            <View style={{flex: 1,}}>
                <Text style={styles.baseText}>
                    <Text style={styles.titleText} onPress={this.onPressTitle}>
                        {this.state.titleText}{'\n'}{'\n'}
                    </Text>
                    <Text numberOfLines={1}>
                        {this.state.bodyText}{'\n'}{'\n'}
                    </Text>
                    <Text numberOfLines={1}>
                        {this.state.bodyText2}
                    </Text>
                </Text>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
                        <Image
                            source={require('./translator.png')} style={{width: 125, height: 125}}
                        />
                    </TouchableHighlight>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
                        <Image
                            source={require('./business-person-silhouette-wearing-tie.png')}
                            style={{width: 125, height: 125, flexDirection: 'row'}}
                        />
                    </TouchableHighlight>
                </View>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
                    <TouchableHighlight onPress={ () => this.props.navigation.navigate('Details') }>
                        <Text style={styles.titleText}>Translator</Text>
                    </TouchableHighlight>

                    <TouchableHighlight onPress={ () => this.props.navigation.navigate('Details') }>
                        <Text style={styles.titleText}>Recruiter</Text>
                    </TouchableHighlight>
                </View>

            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    state = {user: ''}

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center'}}>
                <Text>
                    Which languages do you translate?
                </Text>
                <Picker
                    selectedValue={this.state.language}
                    onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                    <Picker.Item label="English" value="java"/>
                    <Picker.Item label="JavaScript" value="js"/>
                </Picker>

                <Picker
                    selectedValue={this.state.language}
                    onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                    <Picker.Item label="Arabic" value="java"/>
                    <Picker.Item label="JavaScript" value="js"/>
                </Picker>

                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />

                <Button
                    title="Next"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}

const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: {
            screen: DetailsScreen,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default class App extends React.Component {
    render() {
        return <RootStack/>;
    }
}


const styles = StyleSheet.create({
    baseText: {
        fontSize: 30,
        fontFamily: 'normal',
        color: 'skyblue',
        textAlign: 'center'
    },
    titleText: {
        fontSize: 30,
        color: 'skyblue',
        textAlign: 'center'
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        // lineHeight:75,
        // fontSize:75
    },
    buttonContainer: {
        // margin: 20
    },
    alternativeLayoutButtonContainer: {
        // margin: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})

从“React”导入React；
从“react native”导入{按钮、图像、选择器、样式表、文本、TouchableHighlight、视图}；
从“反应导航”导入{StackNavigator}；//可以在package.json中指定版本
类主屏幕扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题文字：“欢迎伊万卡！”，
bodyText:“您的验证成功。”，
bodyText2:'注册为：'
};
}
render（）{
返回(
{this.state.titleText}{'\n'}{'\n'}
{this.state.bodyText}{'\n'}{'\n'}
{this.state.bodyText2}
this.props.navigation.navigate（'Details'）}>
this.props.navigation.navigate（'Details'）}>
this.props.navigation.navigate（'Details'）}>
翻译
this.props.navigation.navigate（'Details'）}>
招聘人员
);
}
}
类DetailsScreen扩展了React.Component{
状态={用户：'}
render（）{
返回(
你翻译哪种语言？
this.setState（{language:itemValue}）}>
this.setState（{language:itemValue}）}>
this.props.navigation.goBack（）}
/>
this.props.navigation.navigate（'Details'）}
/>
);
}
}
const RootStack=StackNavigator(
{
主页：{
屏幕：主屏幕，
},
详情：{
屏幕：详细信息屏幕，
},
},
{
initialRouteName:“主页”，
}
);
导出默认类App扩展React.Component{
render（）{
返回；
}
}
const styles=StyleSheet.create({
基本文本：{
尺寸：30，
fontFamily：“正常”，
颜色：“天蓝色”，
textAlign:“中心”
},
标题文字：{
尺寸：30，
颜色：“天蓝色”，
textAlign:“中心”
},
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
//线高：75，
//字体大小：75
},
按钮容器：{
//差额：20
},
可选布局按钮容器：{
//差额：20，
flexDirection:'行'，
justifyContent:“间距”
}
})

我建议您应该做的第一件事是将模型划分为虚拟部分，然后逐步细化到最小的部分

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

在这个示例之后，我创建了一个简单的代码，您可以遵循它，它可以帮助您创建所需的外观，只需做一些小的更改。（）

导出默认类应用程序扩展组件{
render（）{
返回(
{‘欢迎}
{“您的验证成功了”}
{'注册为：'}
{'Translator'}
{‘招聘人员}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
paddingTop:Constants.statusBarHeight，
背景颜色：“#fff”，
},
第1节：{
弹性系数：0.17，
justifyContent:“柔性端”，
对齐项目：“中心”
},
第2节：{
弹性：0.30，
justifyContent:“flex start”，
对齐项目：“中心”
},
第3节：{
弹性系数：0.10，
为内容辩护：“中心”，
对齐项目：“中心”
},
第4节：{
弹性：0.43
},
正文：{
尺寸：24，
颜色：“#53a6db”，
textAlign:'中心'，
paddingTop:40，
填充底部：40，
paddingLeft:40，
填充右：40
},
按钮容器：{
弹性：1，
flexDirection:“行”
},
按钮：{
弹性系数：0.5，
为内容辩护：“中心”，
对齐项目：“中心”
},
按钮文字：{
尺寸：24，
颜色：“#53a6db”，
textAlign:'中心'，
paddingTop:5，
填充底部：5，
paddingLeft:5，
填充右：5
},
图片：{
宽度：100，
身高：100
}
});

这是最后一个外观

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