如何在显示它之前在React-Native中格式化一个道具？

Question

如果我有一个等于“8888888888”的道具，但我想显示“（888）888-8888”作为文本，那么转换的最佳方式是什么？

Answer 1

你应该申报组件之外的功能，然后通过在需要时功能：

function formatPhoneNumber(s) { 
    var s2 = (""+s).replace(/\D/g, ''); 
    var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/); 
    return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3]; 
} 

var SampleApp = React.createClass({ 
    render: function() { 
    return (
    <View style={styles.container}> 
     <Text>{ formatPhoneNumber('5556065593') }</Text> 
    </View> 
    ); 
    } 
}); 

您还可以设置在渲染功能的变量：

var SampleApp = React.createClass({ 
    render: function() { 
    var number = formatPhoneNumber('5556065593') 
    return (
    <View style={styles.container}> 
     <Text>{ number }</Text> 
    </View> 
    ); 
    } 
}); 

如果你有作为道具的数字，你可以这样称呼它：

formatPhoneNumber(this.props.phonenumber) 

设置一个例子here。