react native app在ios和android中有不同的风格答案

【问题标题】：react native app has different style in ios and androidreact native app在ios和android中有不同的风格
【发布时间】：2020-06-23 11:32:15
【问题描述】：

相同的代码导致ios和android的风格不同。 android 版本应该是它的样子，但 ios 版本看起来完全被破坏了。

这个应用程序已经开发了，但从未在 ios 上运行，可能他们不需要那个。但现在它也应该为 ios 发布。如何用最少的重构达到同样的效果？

全名的输入域代码；

     <View style={inputFieldContainerStyle}>
        <Icon source={usernameIcon} />
        <TextInput
          style={[inputFieldStyle, textInputTextStyle]}
          onChangeText={(text) => this.setState({name: text})}
          accessibilityLabel="name"
          editable={true}
          value={this.state.name}
          placeholder={'First and last name'}
          placeholderTextColor="grey"
          autoCorrect={false}
          label="field1"
          ref={(input) => {
            this.inputs.field1 = input;
          }}
          returnKeyType={'next'}
          onSubmitEditing={() => {
            this.focusTheField('field2');
          }}
          textContentType="name"
        />
      </View>
inputFieldContainerStyle: {
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  marginBottom: 15,
  height: 40,
},
inputFieldStyle: {
  backgroundColor: 'white',
  flex: 1,
  paddingLeft: 10,
  paddingRight: 10,
},
textInputTextStyle:{
  color: 'black',
  fontSize: 16,
  fontFamily: 'HelveticaNeue',
}
// THE Icon COMPONENT
<View style={[containerStyle, secondaryContainerStyle && secondaryContainerStyle]}>
  <Image source={source} style={[iconStyle, secondaryIconStyle && secondaryIconStyle]} />
</View>

【问题讨论】：

你试过"inputFieldContainerStyle" flex:1;
在 'textInputTextStyle' 中给出 'paddingVertical: 10'
嗨Amir Mousavi，你有解决问题的办法吗？我的应用（0.64）在 android 上运行良好，在 ios 上也有同样的问题。

标签： react-native react-native-android react-native-ios react-native-stylesheet

【解决方案1】：

你可以像这样放置一些条件样式：

textInputTextStyle:{
  color: 'black',
  fontSize: 16,
  fontFamily: 'HelveticaNeue',
  padding: Platform.os === 'ios'? 10: null
}

我不确定填充，但这只是给出一个取决于平台的样式示例。

【讨论】：