Question

我正在创建一个带有本机响应的简单记事应用。我想要TextInput全高，可以滚动，具有纸张背景（我认为必须像CSS一样重复背景，但是resizeMode：“ repeat”无效）。底部有一个按钮。请帮忙。

下面的图片是我当前的布局：

这是我想要的布局：

这是我的代码：

<View>
    <ScrollView
      style={{flex: 1}}
    >
    <ImageBackground 
      style={{
        backgroundColor: 'red',
        resizeMode: 'repeat',
        flex: 1
      }}
      source={require('../assets/images/paper-bg.png')}>
      <TextInput
        style={{
          fontSize: 18,
          lineHeight: 25,
          flex: 1,
          padding: 3,
        }}
        multiline = {true}
        numberOfLines = {4}
        placeholder="Hãy viết gì đó" />
    </ImageBackground>
    </ScrollView>

    <View style={{flex: 1, flexDirection: 'row'}}>
      <TouchableOpacity
          activeOpacity={0.95}
          onPress={() => this.onSaveButtonPress()} 
            style ={{
                height: 40,
                width:160,
                borderRadius:4,
                backgroundColor : "#2980b9",
                borderWidth: 1,
                borderColor: '#ebebeb',
                color: "#ffffff",
                flex: 1
            }}>
        <Text
          style={{
            color: 'white',
            textAlign: 'center',
            lineHeight: 38,
            fontSize: 18,
          }}
        >
        Tên nút</Text>
      </TouchableOpacity> 
    </View>
  </View>

我是本机新手，谢谢

Answer 1

resizeMode：重复在Ios上不起作用

https://facebook.github.io/react-native/docs/0.50/image#resizemode

我看不到您的布局，但是您可以尝试同时在背景和文本输入上同时使用宽度和高度，并且我想您可以通过这种方式达到您想要的目的，

您可以使用Dimensions来获取动态背景下设备的宽度和高度。

  const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

TextInput全高和底部的按钮

1 个答案: