ReactNative應用程式樣式不是在xcode模擬器上呈現而是在AndroidStudio上作業？

所以我有一個基本的 React Native 聊天應用程式，它可以在 android studio 和 Xcode ios 模擬器上運行。我正在使用世博會。但是 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'
  }
});

uj5u.com熱心網友回復：

這是根據您的需要更新的代碼，我已經包含了小吃鏈接，因此您可以檢查它是否在 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: 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',
  },
});

標籤：ios 反应 代码 反应原生 安卓工作室

上一篇：有沒有辦法使用AppleSignIn來確定用戶是在唱歌還是在唱歌

下一篇：更新到Swift5后AppDelegate.Swift編譯錯誤