React native 反应本机numberOfLines样式问题

我正在尝试使用numberOfLines属性将文本限制为3行。它是工作，但它是混乱我的页面风格。我把蓝色的右箭头弄丢了

我为代码创建了一个零食：

如您所见，项目编号3未正确显示

更新为

import React, { Component } from 'react';
import { FlatList, View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

class OpenWorkOrders extends Component {
  constructor(props) {
    super(props);
    // Set default values for test
    const test = [
      {id:1, unit:'101', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:2, unit:'102', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:3, unit:'103', dtSubmitted:'01/01/2020', description: 'Work Order Text Test. Test with a longe description. bla bla bla bla bla bla bla bla bla bla. aaaaaaaaa aaaaaaaaa v aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaa', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:4, unit:'104', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:5, unit:'105', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
    ];
    this.state = {
      workOrders: test,
    };
  }

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity>
        <View style={styles.row}>
          <Image source={{ uri: item.image }} style={styles.pic} />
          <View style={{flex: 1}}>
            <View style={styles.nameContainer}>
              <Text style={styles.nameTxt}>Unit: {item.unit}</Text>
            </View>
            <View style={styles.end}>
              <Text style={styles.details} numberOfLines={3}>
                Date Submitted: {item.dtSubmitted}{'\n'}Description: {item.description}
              </Text>
            </View>
          </View>
          <TouchableOpacity>
            <AntDesign
              style={styles.icon}
              name="doubleright" size={15} color="#3232EA"
            />
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }} >
        <FlatList
          extraData={this.state}
          data={this.state.workOrders}
          keyExtractor={(item) => {
            return item.id;
          }}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      borderColor: '#dcdcdc',
      backgroundColor: '#fff',
      borderBottomWidth: 1,
      padding: 10,
      justifyContent: 'space-between',
    },
    pic: {
      borderRadius: 25,
      width: 50,
      height: 50,
    },
    nameContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      width: 270,
    },
    nameTxt: {
      marginLeft: 15,
      fontWeight: '600',
      color: '#222',
      fontSize: 15,
    },
    end: {
      flexDirection: 'column',
      marginRight: 40,
    },
    details: {
      fontWeight: '400',
      color: '#666',
      fontSize: 12,
      marginLeft: 15,
    },
    icon: {
      marginRight: 10
    }
});

export default OpenWorkOrders;

import React，{Component}来自'React'；
从“react native”导入{FlatList、View、StyleSheet、TouchableOpacity、Image、Text}；
从“react native vector icons/AntDesign”导入AntDesign；
类OpenWorkOrders扩展了组件{
建造师（道具）{
超级（道具）；
//设置测试的默认值
常数测试=[
{id:1，单位：'101'，提交日期：'01/01/2020'，说明：'工单文本测试'，图像：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:2，单位：'102'，提交日期：'01/01/2020'，说明：'工单文本测试'，图片：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:3，单位：'103'，数据提交：'01/01/2020'，描述：'工作指令文本测试。测试带有长描述。bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla。aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:4，单位：'104'，提交日期：'01/01/2020'，说明：'工单文本测试'，图片：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:5，单位：'105'，提交日期：'01/01/2020'，说明：'工单文本测试'，图片：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
];
此.state={
训练顺序：测试，
};
}
renderItem=（{item}）=>{
返回(
单位：{item.Unit}
提交日期：{item.dtSubmitted}{'\n'}说明：{item.Description}
);
}
render（）{
返回(
{
返回item.id；
}}
renderItem={this.renderItem}
/>
);
}
}
const styles=StyleSheet.create({
行：{
flexDirection:'行'，
对齐项目：“居中”，
边框颜色：“#dcdc”，
背景颜色：“#fff”，
边界宽度：1，
填充：10，
justifyContent:'之间的空间'，
},
图片：{
边界半径：25，
宽度：50，
身高：50，
},
名称容器：{
flexDirection:'行'，
justifyContent:'之间的空间'，
宽度：270，
},
名称文本：{
marginLeft:15，
重量：'600'，
颜色：'#222'，
尺寸：15，
},
完:{
flexDirection:'列'，
marginRight:40，
},
详情：{
fontWeight:'400'，
颜色：'#666'，
尺寸：12，
marginLeft:15，
},
图标：{
marginRight:10
}
});
导出默认OpenWorkOrder；

使用更新

import React, { Component } from 'react';
import { FlatList, View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

class OpenWorkOrders extends Component {
  constructor(props) {
    super(props);
    // Set default values for test
    const test = [
      {id:1, unit:'101', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:2, unit:'102', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:3, unit:'103', dtSubmitted:'01/01/2020', description: 'Work Order Text Test. Test with a longe description. bla bla bla bla bla bla bla bla bla bla. aaaaaaaaa aaaaaaaaa v aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaa', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:4, unit:'104', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:5, unit:'105', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
    ];
    this.state = {
      workOrders: test,
    };
  }

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity>
        <View style={styles.row}>
          <Image source={{ uri: item.image }} style={styles.pic} />
          <View style={{flex: 1}}>
            <View style={styles.nameContainer}>
              <Text style={styles.nameTxt}>Unit: {item.unit}</Text>
            </View>
            <View style={styles.end}>
              <Text style={styles.details} numberOfLines={3}>
                Date Submitted: {item.dtSubmitted}{'\n'}Description: {item.description}
              </Text>
            </View>
          </View>
          <TouchableOpacity>
            <AntDesign
              style={styles.icon}
              name="doubleright" size={15} color="#3232EA"
            />
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }} >
        <FlatList
          extraData={this.state}
          data={this.state.workOrders}
          keyExtractor={(item) => {
            return item.id;
          }}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      borderColor: '#dcdcdc',
      backgroundColor: '#fff',
      borderBottomWidth: 1,
      padding: 10,
      justifyContent: 'space-between',
    },
    pic: {
      borderRadius: 25,
      width: 50,
      height: 50,
    },
    nameContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      width: 270,
    },
    nameTxt: {
      marginLeft: 15,
      fontWeight: '600',
      color: '#222',
      fontSize: 15,
    },
    end: {
      flexDirection: 'column',
      marginRight: 40,
    },
    details: {
      fontWeight: '400',
      color: '#666',
      fontSize: 12,
      marginLeft: 15,
    },
    icon: {
      marginRight: 10
    }
});

export default OpenWorkOrders;

import React，{Component}来自'React'；
从“react native”导入{FlatList、View、StyleSheet、TouchableOpacity、Image、Text}；
从“react native vector icons/AntDesign”导入AntDesign；
类OpenWorkOrders扩展了组件{
建造师（道具）{
超级（道具）；
//设置测试的默认值
常数测试=[
{id:1，单位：'101'，提交日期：'01/01/2020'，说明：'工单文本测试'，图像：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:2，单位：'102'，提交日期：'01/01/2020'，说明：'工单文本测试'，图片：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:3，单位：'103'，数据提交：'01/01/2020'，描述：'工单文本测试。带有长描述的测试。bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla。aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahttps://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:4，单位：'104'，提交日期：'01/01/2020'，说明：'工单文本测试'，图片：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
{id:5，单位：'105'，提交日期：'01/01/2020'，说明：'工单文本测试'，图片：https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
];
此.state={
训练顺序：测试，
};
}
renderItem=（{item}）=>{
返回(
单位：{item.Unit}
提交日期：{item.dtSubmitted}{'\n'}说明：{item.Description}
);
}
render（）{
返回(
{
返回item.id；
}}
renderItem={this.renderItem}
/>
);
}
}
const styles=StyleSheet.create({
行：{
flexDirection:'行'，
对齐项目：“居中”，
边框颜色：“#dcdc”，
背景颜色：“#fff”，
边界宽度：1，
填充：10，
justifyContent:'之间的空间'，
},
图片：{
边界半径：25，
宽度：50，
身高：50，
},
名称容器：{
flexDirection:'行'，
justifyContent:'之间的空间'，
宽度：270，
},
名称文本：{
marginLeft:15，
重量：'600'，
颜色：'#222'，
尺寸：15，
},
完:{
flexDirection:'列'，
marginRight:40，
},
详情：{
fontWeight:'400'，
颜色：'#666'，
尺寸：12，
marginLeft:15，
},
图标：{
marginRight:10
}
});
导出默认OpenWorkOrder；

Wow…它是w