React Native 应用程序样式不在 xcode 模拟器上呈现，而是在 Android Studio 上工作？答案

【问题标题】：React Native app style not rendering on xcode simulator but working on Android Studio?React Native 应用程序样式不在 xcode 模拟器上呈现，而是在 Android Studio 上工作？
【发布时间】：2022-01-26 04:41:13
【问题描述】：

所以我有一个在 android studio 和 Xcode ios 模拟器上运行的基本 react 原生聊天应用程序。我正在使用世博会。但是 Xcode ios 模拟器并没有像你看到的那样渲染一些样式。 android 模拟器显示每个消息框的所有文本和边框半径的正确对齐。有什么问题？

    function ChatMessage(props) {
  const { to,message,from,time } = props.message;
  const messageClass = from === 'Ram' ? 'sent' : 'received';

  const timeStamp = () =>{
    return( 
    <View>
      <Text style={{fontSize:12,color:'black',alignSelf:'flex-end'}}>{time}</Text>
    </View>
    )
  }

  return (
  <>
    {/* <View className ={`message ${messageClass}`}> */}
    <View style={[styles.messageContainer, messageClass === 'sent' ? styles.sent : styles.received ]}>
      <Text style={[styles.message, messageClass === 'sent' ? styles.sentMessage : styles.receivedMessage ]}>
        
        {messageClass === 'received' && <NameStamp from={from}/>}//PROBLEM HERE. CODE OF NAMESTAMP BELOW
        {messageClass === 'received' && "\n"}
        <Text style={{fontSize:20}}>
        {message}
        </Text>
        {"\n"}
        {timeStamp()} //PROBLEM HERE CODE OF TIMESTAMP ABOVE
        {/*invoke timeStamp function */}
      </Text>
    </View>
  </>
  )
}

//THIS COMPONENT IS ~Ghanshayam IN THE SCREEN. NOT ALIGNING //PROPERLY
const NameStamp = (props) =>{
    return(
      <View>
        <Text style={{color:'grey',fontSize:12,alignSelf:'flex-end'}}>
          ~{props.from}
        </Text>
      </View>
    )
  }




const styles = StyleSheet.create({
  container: {
    backgroundColor:'#d4e4f7',
    flex:1,
    
  },
  header:{
    backgroundColor:'#236ab9',
    flexDirection:'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',
    flex:1,
    
  },
  main:{
    backgroundColor:'#d4e4f7',
    padding:10,
    flex:5,
  },
  form:{
    backgroundColor:'#236ab9',
    flex:1,
    flexDirection:'row'
  },
  input:{
    flex:4,
    color:'white',
    padding:5,
    fontSize:22,
  },
  text:{
    // margin:'0 auto',
    color:'white',
    fontSize:20, 
  },
  message:{
    lineHeight:24,
    padding:15,
    marginBottom:12,
    borderRadius:25,
    overflow:'hidden', //THIS FIXED THE BORDER RADIUS
    position:'relative',
    color:'white',
    textAlign:'left'
  },
  messageContainer:{
    flexDirection:'row',
    alignItems:'center',
  },
  sent:{
    flexDirection:'row-reverse'
  },
  sentMessage:{
    color:'white',
    backgroundColor:'#0b93f6',
    alignSelf:'flex-end'
  },
  receivedMessage:{
    backgroundColor:'white',
    color:'black'
  }
});

【问题讨论】：

你能添加你的样式和一点代码吗...
我没有添加任何样式和代码的原因是因为我希望如果它在 android 上运行良好，那么它应该在 ios 上运行相同，因为它们具有相同的确切代码
是的，我明白了您的担忧，但如果我们看不到代码，我们可能无法告诉您问题是什么以及我们如何解决它...
你添加了overflow: 'hidden'到你添加borderRadius的item组件吗？
overflow:'hidden' 修复了边界半径，谢谢。但是〜Ghanshayam和时间戳的对齐仍然不起作用。我已经添加了代码。非常感谢

标签： ios reactjs xcode react-native android-studio

【解决方案1】：

这里是根据您的需要更新的代码，我已经包含了零食链接，以便您检查它是否在 ios、android 平台上工作

snack demo link

代码：


function ChatMessage(props) {
  const { to, message, from, time } = props.message;
  const messageClass = from === 'Ram' ? 'sent' : 'received';

  const timeStamp = () => {
    return (
      <View>
        <Text
          style={{
            fontSize: 12,
            color: messageClass === 'sent' ? 'white' : 'black',
            alignSelf: 'flex-end',
          }}>
          {time}
        </Text>
      </View>
    );
  };

  return (
    <View
      style={[
        styles.messageContainer,
        messageClass === 'sent' ? styles.sent : styles.received,
      ]}>
      {messageClass === 'received' && <NameStamp from={from} />}
      <Text
        style={[
          styles.message,
          messageClass === 'sent' ? styles.sentMessage : styles.receivedMessage,
        ]}>
        <Text style={{ fontSize: 20 }}>{message}</Text>
      </Text>
      {timeStamp()}
    </View>
  );
}

const NameStamp = (props) => {
  return (
    <View>
      <Text style={{ color: 'grey', fontSize: 12, alignSelf: 'flex-end' }}>
        ~{props.from}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#d4e4f7',
    flex: 1,
    paddingTop: 70,
  },
  header: {
    backgroundColor: '#236ab9',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',
    flex: 1,
  },
  main: {
    backgroundColor: '#d4e4f7',
    padding: 10,
    flex: 5,
  },
  form: {
    backgroundColor: '#236ab9',
    flex: 1,
    flexDirection: 'row',
  },
  input: {
    flex: 4,
    color: 'white',
    padding: 5,
    fontSize: 22,
  },
  text: {
    color: 'white',
    fontSize: 20,
  },
  message: {
    lineHeight: 24,
    color: 'white',
    textAlign: 'left',
  },
  received: {
    backgroundColor: 'white',
    alignSelf: 'flex-start',
  },
  messageContainer: {
    alignItems: 'flex-start',
    padding: 15,
    marginBottom: 12,
    borderRadius: 25,
    overflow: 'hidden',
    minWidth: 160,
    maxWidth: 220, // define min, max width
  },
  sent: {
    alignSelf: 'flex-end',
    backgroundColor: '#0b93f6',
  },
  sentMessage: {
    color: 'white',
   
  },
  receivedMessage: {
    color: 'black',
  },
});

【讨论】：