Javascript 如何添加前缀以响应本机文本输入？

所以我有一个文本字符串，我正试图在文本输入前添加它。由于对齐问题，我将该文本字符串设置为不可编辑的文本输入

我面临的问题是，我无法将可编辑的TextInput内容包装起来。我曾尝试将其全部包装在文本中，但它使整个内容不可编辑，我还尝试将TemplateNameContainer更改为文本，但除了打乱对齐方式外，没有任何区别。有没有办法包装CustomTextInput值

代码：

我想做什么

我最终得到了什么

<TextInputContainer isFocused={isFocused}>
  {templateName && seqNo ? (
    <TemplateNameContainer onPress={this.focusInput} activeOpacity={1}>
      <TemplateName editable={false} pointerEvents="none" isFocused={isFocused}>
        {`${templateName} #${seqNo}:`}
      </TemplateName>
    </TemplateNameContainer>
  ) : null}
  <CustomTextInput
    ref={this.onRef}
    onFocus={onStartEditing}
    onBlur={onStopEditing}
    onChangeText={onChangeText}
    onSubmitEditing={saveTitle}
    returnKeyType="done"
    isFocused={isFocused}
    multiline={true}
    blurOnSubmit={true}
  >
    {isFocused ? editedTitle : title}
  </CustomTextInput>
</TextInputContainer>

const TextInputContainer = styled.View`
  flex-direction: row;
  background-color: ${colors.brightLight};
  align-self: flex-start;
  border-radius: ${radius.small};
  color: ${colors.primary};
  margin-left: -${spacing.space_s};
  padding-bottom: ${spacing.space_xl};
  ${props =>
    props.isFocused &&
    `
  background-color: ${colors.lightCyan};
  `};
`;

const CustomTextInput = styled.TextInput`
  height: auto;
  background-color: ${colors.brightLight};
  flex: 1;
  padding: ${spacing.space_inset_s};
  color: ${colors.primary};
  font-size: ${fonts.t1};
  line-height: ${scale(20)};
  font-weight: 600;
  border-radius: ${radius.small};
  ${props =>
    props.isFocused &&
    `
  background-color: ${colors.lightCyan};
  `};
  ${props =>
    props.inObjective &&
    `
    font-weight: normal;
    font-size: ${fonts.t2};
  `};
`;

const TemplateNameContainer = styled.TouchableOpacity`
  justify-content: flex-start;
  align-items: flex-start;
`;

const TemplateName = styled(CustomTextInput)`
  padding-right: 0;
`;