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

Question

相同的代码导致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>

标签： react-nativereact-native-androidreact-native-iosreact-native-stylesheet

Answer 1

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

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

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