最新消息:服务器现已从linode换到fzhost.net,且主题已从retina 0.2换为大前端D8

【已解决】ReactNative中如何在Text中让文字右对齐

React Native crifan 13浏览 0评论

之前已经通过:

class AwesomeProject extends Component {
    // Initialize the hardcoded data
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                {
                    intentionLevel : "H",
                    customerName : "王小丫",
                    intentionCar : "奥迪A3进口",
                    updateTime : "2016/12/28"
                },
                {
                    intentionLevel : "A",
                    customerName : "王芳",
                    intentionCar : "奥迪S7",
                    updateTime : "1/1"
                },
                {
                    intentionLevel : "C",
                    customerName : "秦小刚",
                    intentionCar : "奥迪Q7",
                    updateTime : "2/5"
                },
                {
                    intentionLevel : "B",
                    customerName : "李小燕",
                    intentionCar : "奥迪TTS",
                    updateTime : "周三"
                },
                {
                    intentionLevel : "H",
                    customerName : "郑钧",
                    intentionCar : "奥迪Q5(进口)",
                    updateTime : "9:15"
                },
                {
                    intentionLevel : "H",
                    customerName : "Lucia Xie",
                    intentionCar : "奥迪Q5(进口)",
                    updateTime : "2016/12/20"
                },
                {
                    intentionLevel : "C",
                    customerName : "司马相如",
                    intentionCar : "奥迪Q5(进口)",
                    updateTime : "2/20"
                },
                {
                    intentionLevel : "C",
                    customerName : "张曲",
                    intentionCar : "奥迪Q5(进口)",
                    updateTime : "2017/2/15"
                },
                {
                    intentionLevel : "O",
                    customerName : "赵平",
                    intentionCar : "奥迪Q5(进口)",
                    updateTime : "昨天"
                },
            ])
        };
    }
    render() {
      return (
          <View style={{flex: 1, paddingTop: 20}}>
              <View style={styles.customerList}>
                  <ListView
                      dataSource={this.state.dataSource}
                      renderRow={(rowData) =>
                          <View style={styles.customerRow}>
                            <Text style={styles.intentionLevel}>{rowData.intentionLevel}</Text>
                            <Text style={styles.customerName}>{rowData.customerName}</Text>
                            <Text style={styles.intentionCar}>{rowData.intentionCar}</Text>
                            <Text style={styles.updateTime}>{rowData.updateTime}</Text>
                          </View>
                      }
                  />
              </View>
          </View>
      );
    }
}
const styles = StyleSheet.create({
    navigation:{
        flex: 1,
        paddingTop:10,
        height:10,
        backgroundColor:’#458cd3′,
    },
    customerList:{
        flex: 1,
        paddingTop: 30,
    },
    customerRow:{
        flex: 1,
        flexDirection: ‘row’,
        height: 30,
    },
    intentionLevel: {
        paddingLeft: 10,
        width: 20,
        color: ‘red’,
    },
    customerName: {
        paddingLeft: 10,
        width: 100,
        color: ‘black’,
    },
    intentionCar: {
        paddingLeft: 10,
        width: 120,
        color: ‘gray’,
    },
    updateTime:{
        paddingLeft: 10,
        paddingRight: 10,
        width: 120,
        color: ‘#c1c4c9’,
    },
});
AppRegistry.registerComponent(‘AwesomeProject’, () => AwesomeProject);

实现效果:

现在想要时间的文字,在Text内,右对齐

所以尝试去添加为:

   updateTime:{
        paddingLeft: 10,
        paddingRight: 10,
        width: 120,
        alignItems: ‘right’,
        color: ‘#c1c4c9’,
    },

结果报错了:

然后注意到了:

Layout Props

中的,alignItems只有:

enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’) #

没有left

然后注意到:

javascript – React-Native Updating List View DataSource – Stack Overflow

“  selectionText:{

    fontSize:15,

    paddingTop:3,

    color:’#b5b5b5′,

    textAlign:’right’

  },”

所以去试试:

    textAlign:’right’

果然可以了文字右对齐了:

【总结】

ReactNative中,Text的右对齐,可以直接去设置    textAlign:’right’,即可。

举例:

    updateTime:{
        paddingLeft: 10,
        paddingRight: 10,
        width: 120,
        textAlign:’right’,
        color: ‘#c1c4c9’,
    },

转载请注明:在路上 » 【已解决】ReactNative中如何在Text中让文字右对齐

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
57 queries in 0.534 seconds, using 12.49MB memory