如何在React native中将屏幕分为三个具有不同文本内容的部分

Posted 2023-01-27

我正在研究React本机项目，在此我怀疑有人可以告诉我如何使用react native将屏幕分为具有不同内容的三个部分。这是我尝试过的，所以有人请告诉我如何实现另外两个部分

这是App.js

import React from 'react';
import View, Text, StyleSheet from 'react-native';

const App = props => 
  return (
    <View
      style=[
        flex: 1, flexDirection: 'row',
        justifyContent: 'space-around',
        styles.container,
      ]>
      <Text>Mark</Text>
      <Text style=[backgroundColor: 'green']>Tom</Text>
      <Text style=[backgroundColor: 'red']>Williams</Text>
      <Text>Sara</Text>
    </View>
  );
;

const styles = StyleSheet.create(
  container: 
    marginTop: 10,
    padding: 10,
    color: '#ff0000',
  ,
);

export default App;

答案

您可以像上面的代码一样在组件内部包含组件，只需将其包装在另一个父视图中，就可以添加任意数量的视图。如下所示，我也以适当的方式将您的样式说明清楚。

const App = props => 
  return (
   <View>

     <View style=styles.container>
      <Text>Mark</Text>
      <Text style=backgroundColor: 'green'>Tom</Text>
      <Text style=backgroundColor: 'red'>Williams</Text>
      <Text>Sara</Text>
    </View>

     <View style=styles.container>
      <Text>Mark</Text>
      <Text style=backgroundColor: 'green'>Tom</Text>
      <Text style=backgroundColor: 'red'>Williams</Text>
      <Text>Sara</Text>
    </View>

     <View style=styles.container>
      <Text>Mark</Text>
      <Text style=backgroundColor: 'green'>Tom</Text>
      <Text style=backgroundColor: 'red'>Williams</Text>
      <Text>Sara</Text>
    </View>

   </View>
  );
;

const styles = StyleSheet.create(
  container: 
    marginTop: 10,
    padding: 10,
    color: '#ff0000',
    justifyContent: 'space-around',
    flex:1
  ,
);