react-native - 如何在 React Native 中将我的屏幕分成三个具有不同文本内容的部分

Question

我正在开发一个 React Native 项目，在此我有一个疑问，有人可以告诉我如何使用 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;

标签： react-native

Answer 1

就像上面的代码一样，您可以在组件内部拥有组件，您只需将其包装在另一个父视图中，您可以添加任意数量的视图。像下面这样的东西，我也把你的风格以适当的方式表达清楚。

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