markdown 关于React-native的常见样式修复和有用提示

Posted 2021-05-06

# KeyboardAwareScrollView
Used to avoid keyboard to hide text input [(GitHub)](https://github.com/APSL/react-native-keyboard-aware-scroll-view)

# Disable scrollview bounce (elastic effect)
```javascript
<ScrollView ... bounces={false}>
```

# Background Image
```javascript
<ImageBackground style={localStyles.backgroundImage} source={require('@assets/login/loginBackground.png')} imageStyle={{resizeMode: 'cover'}}>
  ...
</ImageBackground>
```

# Text input useful props
```javascript
<TextInput
  ...
  ref={(passwordField) => this.passwordField = passwordField} //reference
  autofocus={true} //focuses the input on componentDidMount
  maxLength={40} //max length
  autoCorrect={false} // disable auto-correct
  autoCapitalize='none' //disable auto-capitalize
  returnKeyType='next' //keyboard return key
  placeholder={StringsConstant.LOGIN.USERNAME_INPUT_PLACEHOLDER} //placeholder
  value={username} onChangeText={username => updateCredentials(username, password)} //redux stuff
  onSubmitEditing={() => this.passwordField.focus()} //return key action
  onSubmitEditing={() => {
      if(shouldLoginButtonBeActive) {
          this.props.goToScene("yourRound");
      }
  }}
  underlineColorAndroid={'transparent'} //android style fix
  ...
/>
```

# Android TextInput style fix
```javascript
<TextInput
  ...
  underlineColorAndroid={'transparent'} //android style fix
  ...
/>
```

# Use of buttons
```javascript
<TouchableOpacity 
  ...
  onPress={() => { this.props.goToScene("yourRound") }}
  style=...
  disabled={!username || !password}
  ...
>
    <Text style=...>{StringsConstant.LOGIN.CONNECT_BUTTON_TEXT}</Text>
</TouchableOpacity>
```

# Conditional styling
```javascript
<MyComponent>
  style={[localStyles.startButton /*default style*/, shouldLoginButtonBeActive /*statement*/ ? localStyles.startButtonEnabled /*if true*/: localStyles.startButtonDisabled /*else*/]}
</MyComponent>
```

# Display only if val exists
```javascript
{myVar && <myComponent>{myVar}</myComponent>}
// OR
{/*myStatement (func, var...)*/ && <myComponent>{myVar}</myComponent>}
```

# FlatList
```javascript
<FlatList
    data={myObject.myVars}
    keyExtractor={myVar=>`${myVar.uniqueVar}`}
    renderItem={(myVar)=><MyCell myProps={myVar.item}></MyCell>}
/>
```

# FlatList empty state
```javascript
{myObject.myFlatListObjects && myObject.myFlatListObjects.length > 0 && <FlatList ... />}
{myObject.myFlatListObjects && myObject.myFlatListObjects.length == 0 && <Text>{myEmptyMessage}</Text>}
```

# String builder helper
```javascript
  buildAddressString(args) {
    let builtString = "";
  
    if (args instanceof Array) {
        args.forEach(function(element, idx, array) {
            if (idx === array.length - 1){
                builtString += element || "";
            } else {
                builtString += element ? element + " " : "";
            }
        });
    }
  
    return builtString;
  }
```

# JS enums (in external files)
```javascript
export default Alias = {
    StatusEnum: {
        TODO: 0,
        DOING: 1,
        DONE: 2,
    },
    StatusMap: {
        0: StringConstants.YOUR_ROUND.STATUS_TODO,
        1: StringConstants.YOUR_ROUND.STATUS_DOING,
        2: StringConstants.YOUR_ROUND.STATUS_DONE
    }
}
```