为reactnative TextInput 设置边框

发布于05月25日

使用React native 0.26，

我的组件是这样的

const Search = () => {
    return (
      <View style={styles.backgroundImage}>
        <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/>
      </View>
    )
}

还有我的风格:

const styles = StyleSheet.create({
  backgroundImage: {
    flex : 1,
    flexDirection: "column",
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInput: {
    justifyContent: "center",
    alignItems: "stretch",
    borderRightWidth: 30,
    borderLeftWidth: 30,
    height: 50,
    borderColor: "#FFFFFF",
  }
})

我面临的问题是

边框右宽度和左宽度似乎没有任何效果，占位符文本仅从左边缘开始.
TextInput的背景为"灰色"，与视图的背景相同.我本以为它默认为白色(感觉透明).
有了iOS模拟器如何打开键盘，我想设置returnKeyType，看看键盘是什么样子(还有onSubmitEditing和test上的一些代码).

截图如下:

为reactnative TextInput 设置边框

推荐答案

React-native相关问答推荐

ios 中节列表中的scrollToLocation 不起作用.在 Android 上，列表滚动回索引 0，但在 ios 上不会发生同样的情况

如何在react-native 中设置视图的自动高度

加载作为props传递的图像

Invariant Violation：Chrome 不支持在本机模块上调用同步方法

你如何在生产模式下运行 react-native 应用程序？

打包程序无法启动

Property body[41] of BlockStatement expected node to be of a type ["Statement"] but instead got "AssignmentExpression"

如何解决react-navigation 问题：Animated： `useNativeDriver` is not supported because the native animated module is missing.？

React Native：ScrollView 中的 TouchableOpacity onPress 问题

react-native createbottomtabnavigator 隐藏标签栏标签

如何在 React Native 中获取电话号码？

使用条码 scanner 掩码的透明视图react-native相机

如何在 React Native 中使用 index.js 而不是 (index.ios.js, index.android.js) 进行跨平台应用程序？

无法解析模块react-navigation

仅链接字体的方法

使用 React Navigation 导航堆栈时重新渲染组件

React Native Build Error on IOS - typedef 用不同类型重新定义('uint8_t'(又名'unsigned char')与'enum clockid_t')

如何从react-native应用程序打开外部应用程序？

React Native 多行TextInput，文本居中

使用 TouchableWithoutFeedback react-native onPress 不起作用