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

Question

所以我有一个字符串，我想在TextInput的前面添加。由于对齐问题，我将该文本字符串设置为不可编辑的TextInput。

我面临的问题是，我无法包装可编辑的TextInput内容。我尝试将所有内容包装在Text内，但使整个内容不可编辑，我还尝试将TemplateNameContainer更改为Text，但除了弄乱对齐方式外，没有任何区别。有没有办法包装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;
`;

我要做什么

我最终得到的结果