react native ios平臺上textAlignVertical屬性不起作用
為了實現text文字居中,原本在android 上開發以下的css樣式是ok的
PaymentTimeStyle:{
height:36,
width:100,
fontSize:14,
textAlign:'center',
alignItems:'center',
justifyContent:'center',
textAlignVertical:'center',
}
但在ios上只有水平居中,沒有垂直居中,上網查了一下,很多人是通過view巢狀text,但覺得這樣麻煩,而且當View的層級越深渲染的速度也會越慢。所以建議還是用以下css屬性
lineHeight:36
但是測試時加上了在android上又顯示不正常,無奈下為了不影響android,做了調整,最後的樣式程式碼如下:
import {StyleSheet,Platform} from 'react-native';
PaymentTimeStyle:{
height:36,
width:100,
textAlign:'center',
alignItems:'center',
justifyContent:'center',
textAlignVertical:'center',
...Platform.select({
ios:{
lineHeight:36,
},
android:{
}
}),
}
相關文章
- React Native 自定義元件及屬性React Native元件
- 在 Windows 上搭建 React Native IOS 開發環境WindowsReact NativeiOS開發環境
- React Native 探索(三)元件的 Props (屬性) 和 State (狀態)React Native元件
- React-Native修改安卓平臺的包名React安卓
- React Native填坑之旅--多平臺支援之WebReact NativeWeb
- React-Native iOS Module開發ReactiOS
- 探索 react-native run-ios(android)ReactiOSAndroid
- ? React-Native 官方示例演示 ( ios & android)ReactiOSAndroid
- 從 React Native 到 Flutter,移動跨平臺方案的真相React NativeFlutter
- iOS UITableView 修改屬性iOSUIView
- React Native iOS混合開發實戰教程React NativeiOS
- [譯] React Native 與 iOS 和 Android 通訊React NativeiOSAndroid
- 《React Native跨平臺移動應用開發》讀後鬼扯React Native
- 移動跨平臺方案對比:WEEX、React Native、Flutter和PWAReact NativeFlutter
- [React Native]react-native-scrollabReact Native
- React屬性用法總結React
- iOS--React Native網路請求外掛iOSReact Native
- React Native釋出APP之打包iOS應用React NativeAPPiOS
- 輕鬆教你React Native 混合開發(iOS篇)React NativeiOS
- React Native Icon方案:react-native-svgReact NativeSVG
- React專題:不可變屬性React
- iOS--React Native視訊播放器外掛iOSReact Native播放器
- 在Mac搭建react-native iOS開發環境MacReactiOS開發環境
- react native 處理iOS和安卓系統文字React NativeiOS安卓
- OpenHarmony相容性平臺更新上線
- React Native轉web方案:react-native-webReact NativeWeb
- React Native 使用 react-native-webview 渲染 HTMLReact NativeWebViewHTML
- 關於IOS 屬性atomic(原子性)的理解iOS
- 深入解析React props和state屬性React
- react native 的初次嘗試之環境搭建 Mac iosReact NativeMaciOS
- [譯] 原生 iOS(Swift) 和 React-Native 的效能比較iOSSwiftReact
- react-native配置react-native-image-crop-pickerReact
- React Native選擇器元件-react-native-slidepickerReact Native元件IDE
- react native 和原生平臺 android的互動React NativeAndroid
- 修復ios不支援fixed屬性iOS
- 跨平臺專案GSYGithubApp系列三大開源版本推薦(Flutter 、React Native 、Weex)GithubAPPFlutterReact Native
- react-nativeReact
- React Native 上手React Native